Skip to content

Instantly share code, notes, and snippets.

@nikoloza
Last active January 29, 2017 12:38
Show Gist options
  • Save nikoloza/69cdae487a5c013baff8ff561aa8415c to your computer and use it in GitHub Desktop.
Save nikoloza/69cdae487a5c013baff8ff561aa8415c to your computer and use it in GitHub Desktop.
:root {
--tooltip-color: snow;
--tooltip-background: #333;
--tooltip-border-radius: 3px;
--tooltip-font-size: 14px;
--tooltip-padding: 6px 8px;
}
[data-tooltip] {
position: relative;
&:before,
&:after {
position: absolute;
left: 50%;
opacity: 0;
visibility: hidden;
z-index: 2;
transition: 0.3s ease;
transition-property: opacity, transform, visibility;
}
&:before {
content: attr(data-tooltip);
color: var(--tooltip-color);
background: var(--tooltip-background);
border-radius: var(--tooltip-border-radius);
line-height: 1.4;
font-size: 14px;
font-weight: 600;
text-align: center;
letter-spacing: .1;
padding: var(--tooltip-padding);
box-sizing: border-box;
min-width: 100px;
bottom: 100%;
transform: translate3d(-50%, -7px, 0);
/* optional */
/* white-space: nowrap; */
}
&:after {
content: '';
border-top: 5px var(--tooltip-background);
border-left: 3px transparent solid;
border-right: 3px transparent solid;
top: 0;
margin-left: -2px;
transform: translate3d(0, -7.5px, 0);
}
&:focus,
&:hover {
&:before,
&:after {
opacity: 1;
visibility: visible;
}
&:before {
transform: translate3d(-50%, -2px, 0);
}
&:after {
transform: translate3d(0, -2.5px, 0);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment