Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time
51 lines (43 sloc) 1.08 KB
// Simple CSS (only) tooltips
// can be attached to almost any element
// basic usage: <em data-tooltip="em em em em em">em</em>
// used pixles here, so no mess when changing CSS vars.
// after: the tooltop content itself
// before: the triangle shape
position: relative;
z-index: 1000000;
&:before, &:after {
font-family: var(--font-standard); // reset
transition: transform .8s;
transform: translateX(-50%) translateY(-9px);
position: absolute;
visibility: hidden;
&:hover, &:focus {
z-index: 2;
&:before, &:after {
visibility: visible;
transform: translateX(-50%) translateY(0);
// The triangle
@extend .arrow; // see triangle.scss
&:before {
top: -10px;
// the tooltip itself
&:after {
content: attr(data-tooltip);
top: -30px;
text-align: center;
font-weight: normal;
left: 50%;
font-size: 11px;
background: var(--color-main-5);
color: var(--color-main-1);
padding: 4px;
max-width: 500px;
white-space: nowrap;