Last active
July 31, 2019 22:18
-
-
Save ashtonmeuser/abdc2389596c732ece30643ec2186a17 to your computer and use it in GitHub Desktop.
Add tooltips to elements with relevant data attribute
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Relative positioning for tooltip-enabled elements */ | |
| [data-tooltip] { | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| /* Attributes shared between tooltip content and triangle */ | |
| [data-tooltip]:before, | |
| [data-tooltip]:after { | |
| display: none; /* Hide tooltip by default */ | |
| background-color: #000; | |
| left: 100%; /* To right of parent */ | |
| position: absolute; /* Relative to parent */ | |
| top: 50%; /* Center in parent */ | |
| z-index: 100; /* Above other elements */ | |
| } | |
| /* Tooltip content */ | |
| [data-tooltip]:before { | |
| max-width: 250px; | |
| width: max-content; | |
| margin-left: 13px; /* Triangle width + triangle left margin */ | |
| padding: 1em; | |
| line-height: 1.2em; | |
| margin-top: -1.6em; /* Center with first line of content (padding + 0.5 * line height) */ | |
| color: #FFF; | |
| border-radius: 5px; | |
| content: attr(data-tooltip); /* Set tooltip content to data attribute */ | |
| text-align: center; | |
| font-size: 12px; | |
| font-family: sans-serif; | |
| } | |
| /* Tooltip speech bubble triangle */ | |
| [data-tooltip]:after { | |
| margin-top: -6px; /* Center based on triangle height */ | |
| margin-left: 3px; /* Margin between parent and triangle */ | |
| width: 11px; /* Width + 1px to bridge gap */ | |
| height: 12px; | |
| content: " "; /* Pseudo-elements can't be empty */ | |
| clip-path: polygon(0 50%, 100% 0, 100% 100%); /* Triangle mask */ | |
| } | |
| /* Display tooltip on hover */ | |
| [data-tooltip]:hover:before, | |
| [data-tooltip]:hover:after { | |
| display: block; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment