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 |
||
| Line 1: | Line 1: | ||
.tooltip { | .tooltip { | ||
position: relative; | position: relative; | ||
| Line 6: | Line 5: | ||
} | } | ||
.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 16: | ||
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 32: | ||
border-width: 5px; | border-width: 5px; | ||
border-style: solid; | border-style: solid; | ||
border-color: # | border-color: #000 transparent transparent transparent; | ||
} | } | ||
Revision as of 21:50, 5 April 2026
.tooltip {
position: relative;
display: inline-block;
cursor: help;
}
.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;
}
