Template:Tooltip/tooltip.css: Difference between revisions
From SNCApedia, the shit nobody cares about encyclopedia
Jump to navigationJump to search
Created page with "→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..." |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.tooltip { | .tooltip { | ||
position: relative; | position: relative; | ||
display: inline-block; | display: inline-block; | ||
cursor: help; | cursor: help; | ||
text-decoration: underline dotted; /* underline dotted like <abbr> */ | |||
} | } | ||
.tooltip .tooltiptext { | .tooltip .tooltiptext { | ||
visibility: hidden; | visibility: hidden; | ||
background-color: #000; /* pure black */ | |||
background-color: # | |||
color: #fff; | color: #fff; | ||
text-align: center; | text-align: center; | ||
| Line 19: | Line 17: | ||
bottom: 125%; | bottom: 125%; | ||
left: 50%; | left: 50%; | ||
transform: translateX(-50%); | |||
opacity: 0; | opacity: 0; | ||
transition: opacity 0.3s; | transition: opacity 0.3s; | ||
white-space: normal; /* allow wrapping */ | |||
max-width: 300px; /* optional: limit width */ | |||
} | } | ||
| Line 33: | Line 33: | ||
border-width: 5px; | border-width: 5px; | ||
border-style: solid; | border-style: solid; | ||
border-color: # | 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;
}
