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 |
||
| (One intermediate revision by the same user not shown) | |||
| Line 3: | Line 3: | ||
display: inline-block; | display: inline-block; | ||
cursor: help; | cursor: help; | ||
text-decoration: underline dotted; /* like <abbr> */ | text-decoration: underline dotted; /* underline dotted like <abbr> */ | ||
} | } | ||
| Line 15: | Line 15: | ||
position: absolute; | position: absolute; | ||
z-index: 1; | z-index: 1; | ||
bottom: 125%; | |||
left: 50%; | left: 50%; | ||
transform: translateX(-50%); | transform: translateX(-50%); | ||
opacity: 0; | opacity: 0; | ||
transition: opacity 0.3s; | transition: opacity 0.3s; | ||
white-space: normal; | white-space: normal; /* allow wrapping */ | ||
max-width: 300px; | max-width: 300px; /* optional: limit width */ | ||
} | } | ||
/* | /* Tooltip arrow */ | ||
.tooltip .tooltiptext | .tooltip .tooltiptext::after { | ||
content: ""; | content: ""; | ||
position: absolute; | position: absolute; | ||
top: 100%; | top: 100%; | ||
left: 50%; | left: 50%; | ||
margin-left: -5px; | margin-left: -5px; | ||
| Line 36: | Line 34: | ||
border-style: solid; | border-style: solid; | ||
border-color: #000 transparent transparent transparent; | border-color: #000 transparent transparent transparent; | ||
} | } | ||
Latest revision as of 21:57, 5 April 2026
.tooltip {
position: relative;
display: inline-block;
cursor: help;
text-decoration: underline dotted; /* underline dotted like <abbr> */
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: #000; /* pure black */
color: #fff;
text-align: center;
border-radius: 6px;
padding: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
white-space: normal; /* allow wrapping */
max-width: 300px; /* optional: limit width */
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}
/* Show tooltip on hover */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
