home-assistant.io/sass/custom/_terminology_tooltip.scss
Franck Nijhof 8b71353f75
Add Jekyll terminology tooltip plugin (#26542)
Co-authored-by: Joakim Sørensen <joasoe@gmail.com>
2023-03-11 12:58:07 +01:00

47 lines
826 B
SCSS

.terminology {
position: relative;
border-bottom: 2px dotted $primary-color;
cursor: help;
&:hover .terminology-tooltip {
visibility: visible;
opacity: 1;
}
.terminology-tooltip {
visibility: hidden;
width: 250px;
background-color: $primary-color;
color: #fff;
font-size: 0.8em;
padding: 8px;
border-radius: 8px;
opacity: 0;
transition: opacity 0.5s;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -125px;
a {
color: #fff;
font-weight: 500;
}
&:after {
content: " ";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: $primary-color transparent transparent transparent;
}
}
}