Skip to content

Instantly share code, notes, and snippets.

@fuzzyfox
Created May 26, 2017 18:24
Show Gist options
  • Save fuzzyfox/31c8bee37c2f6d4834295d5d10a02d28 to your computer and use it in GitHub Desktop.
Save fuzzyfox/31c8bee37c2f6d4834295d5d10a02d28 to your computer and use it in GitHub Desktop.
Super Simple, Tiny, SCSS tooltips.
$spacer: 1rem;
$tooltip-border-radius: ( 0.333 * $spacer );
[data-tooltip] {
position: relative;
&::before,
&::after {
opacity: 0;
pointer-events: none;
transition: all 200ms ease 200ms;
position: absolute;
bottom: 100%;
left: 50%;
z-index: 10;
transform: translate( -50%, ( 0.5 * $spacer ) );
transform-origin: top;
}
&::before {
content: '';
width: 0;
height: 0;
border: ( 0.5 * $spacer ) solid transparent;
border-top-color: rgba( #333, 0.9 );
border-top-width: ( 0.4 * $spacer );
margin-bottom: ( -0.4 * $spacer );
pointer-events: none;
}
&::after {
background: rgba( #333, 0.9 );
border-radius: $tooltip-border-radius;
color: white;
content: attr( data-tooltip );
font: normal 0.75rem/1.15 'Open Sans', Arial, sans-serif;
padding: 0.5em 1em;
white-space: nowrap;
margin-bottom: ( 0.5 * $spacer );
}
&:hover {
&::before,
&::after {
opacity: 1;
padding-top: auto;
transform: translate( -50%, 0 );
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment