Template:Tooltip/tooltip.css: Difference between revisions
From SNCApedia, the shit nobody cares about encyclopedia
Jump to navigationJump to search
No edit summary Tag: Reverted |
No edit summary Tag: Manual revert |
||
| Line 1: | Line 1: | ||
/* Tooltip container */ | |||
.tooltip { | .tooltip { | ||
position: relative; | position: relative; | ||
display: inline-block; | display: inline-block; | ||
cursor: help; | cursor: help; | ||
} | } | ||
/* Tooltip text */ | |||
.tooltip .tooltiptext { | .tooltip .tooltiptext { | ||
visibility: hidden; | visibility: hidden; | ||
background-color: # | width: 180px; | ||
background-color: #333; | |||
color: #fff; | color: #fff; | ||
text-align: center; | text-align: center; | ||
| Line 17: | Line 19: | ||
bottom: 125%; | bottom: 125%; | ||
left: 50%; | left: 50%; | ||
margin-left: -90px; | |||
opacity: 0; | opacity: 0; | ||
transition: opacity 0.3s; | transition: opacity 0.3s; | ||
} | } | ||
| Line 32: | Line 33: | ||
border-width: 5px; | border-width: 5px; | ||
border-style: solid; | border-style: solid; | ||
border-color: # | border-color: #333 transparent transparent transparent; | ||
} | } | ||
Revision as of 13:40, 7 April 2026
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
cursor: help;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 180px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -90px;
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}
/* Show tooltip on hover */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
