mirror of
https://github.com/ParadiseSS13/Paradise.git
synced 2026-01-05 07:02:36 +00:00
64 lines
1.2 KiB
Plaintext
64 lines
1.2 KiB
Plaintext
*[data-tooltip] {
|
|
position: relative;
|
|
|
|
&::after {
|
|
position: absolute;
|
|
display: block;
|
|
z-index: 2;
|
|
width: 250px;
|
|
padding: 10px;
|
|
transform: translateX(-50%);
|
|
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
|
|
white-space: normal;
|
|
text-align: left;
|
|
content: attr(data-tooltip);
|
|
|
|
transition: all .5s;
|
|
border: 1px solid #999999;
|
|
background-color: #363636;
|
|
}
|
|
|
|
&:hover::after {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
&.tooltipTop::after {
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(8px);
|
|
}
|
|
&.tooltipTop:hover::after {
|
|
transform: translateX(-50%) translateY(-8px);
|
|
}
|
|
|
|
&.tooltipBottom::after {
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-8px);
|
|
}
|
|
&.tooltipBottom:hover::after {
|
|
transform: translateX(-50%) translateY(8px);
|
|
}
|
|
|
|
&.tooltipLeft::after {
|
|
top: 50%;
|
|
right: 100%;
|
|
transform: translateX(8px) translateY(-50%);
|
|
}
|
|
&.tooltipLeft:hover::after {
|
|
transform: translateX(-8px) translateY(-50%);
|
|
}
|
|
|
|
&.tooltipRight::after {
|
|
top: 50%;
|
|
left: 100%;
|
|
transform: translateX(-8px) translateY(-50%);
|
|
}
|
|
&.tooltipRight:hover::after {
|
|
transform: translateX(8px) translateY(-50%);
|
|
}
|
|
} |