Skip to content

Instantly share code, notes, and snippets.

@vincentnavetat
Last active October 3, 2019 14:29
Show Gist options
  • Save vincentnavetat/a63835d8f2380d32a6c498cc7ae1ecfe to your computer and use it in GitHub Desktop.
Save vincentnavetat/a63835d8f2380d32a6c498cc7ae1ecfe to your computer and use it in GitHub Desktop.
Tooltip web component CSS
@keyframes tooltipFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
body {
padding: 16px;
}
.tooltip {
display: inline-flex;
flex-direction: column;
justify-content: center;
color: blue;
border-bottom: 1px dotted;
position: relative;
}
.tooltip__label {
&:before { // for the help cursor
content: '';
display: flex;
cursor: help;
position: absolute;
width: 100%;
height: 100%;
z-index: 3;
}
}
.tooltip-dropdown {
display: none;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 2;
padding-top: 32px;
}
.tooltip-dropdown__content {
color: white;
background-color: black;
border-radius: 4px;
padding: 8px 12px;
width: 300px;
text-align: left;
}
.tooltip--open {
.tooltip-dropdown {
animation: tooltipFadeIn 0.15s;
display: block;
}
}
@media (hover: hover) {
.tooltip:hover {
.tooltip-dropdown {
animation: tooltipFadeIn 0.15s;
display: block;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment