chaoszone.cz/site/css/hover.scss

57 lines
1.1 KiB
SCSS

.tooltip-toggle {
cursor: pointer;
//position: relative;
//Tooltip text container
&::before {
position: absolute;
top: -30px;
//left: -80px;
background-color: #00ff00;
border-radius: 5px;
color: #fff;
content: attr(aria-label); //This pulls in the text from the element with the tooltip
padding: 1ex;
text-transform: none;
font-weight: bold;
transition: all 0.5s ease;
width: 160px;
line-height: 16px;
}
//Tooltip arrow
//&::after {
// position: absolute;
// top: -12px;
// left: 9px;
// border-left: 5px solid transparent;
// border-right: 5px solid transparent;
// border-top: 5px solid #2B222A;
// content: " ";
// font-size: 0;
// line-height: 0;
// margin-left: -5px;
// width: 0;
//}
//Setting up the transition
&::before,
&::after {
color: #efefef;
font-family: monospace;
font-size: 16px;
opacity: 0;
pointer-events: none;
text-align: center;
}
//Triggering the transition
&:focus::before,
&:focus::after,
&:hover::before,
&:hover::after {
opacity: 1;
transition: all 0.75s ease;
}
}