Skip to content

Instantly share code, notes, and snippets.

@maxboeck
Created August 24, 2019 10:21
Show Gist options
  • Save maxboeck/18e62d418b5c516fd02f6e0b20dc4b3d to your computer and use it in GitHub Desktop.
Save maxboeck/18e62d418b5c516fd02f6e0b20dc4b3d to your computer and use it in GitHub Desktop.
CSS tooltip
/* ToolTip */
[aria-label].has-tooltip {
position: relative;
}
[aria-label].has-tooltip::after {
display: block;
content: attr(aria-label);
width: auto;
position: absolute;
bottom: 100%;
left: 50%;
padding: 0.5rem;
pointer-events: none;
font-size: 0.75rem;
white-space: nowrap;
line-height: 1;
color: #fff;
background-color: #000;
border-radius: 0.25rem;
opacity: 0;
transform: translate(-50%, 0);
transition: all 0.2s ease;
}
[aria-label].has-tooltip:hover::after {
opacity: 1;
transform: translate(-50%, -0.25rem);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment