Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
[data-tip] {
position: relative;
}
[data-tip]:before {
content: '';
position: absolute;
top: 100%;
left: calc(50% - 6px);
margin-top: -6px;
pointer-events: none;
border: 6px solid transparent;
border-bottom-color: #333;
}
[data-tip]:after {
content: attr(data-tip);
position: absolute;
top: 100%;
left: 50%;
margin-top: 6px;
background-color: #333;
color: #fff;
border-radius: 4px;
white-space: nowrap;
font-size: 0.8em;
padding: 0.5em 1em;
z-index: 100;
transform: translate(-50%, 0);
}
[data-tip]:before,
[data-tip]:after {
position: absolute;
top: 100%;
z-index: 100;
visibility: hidden;
opacity: 0;
}
[data-tip]:hover:before,
[data-tip]:hover:after {
visibility: visible;
opacity: 1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment