Template:Tooltip/styles.css: Difference between revisions
Template page
More actions
TheMysterys (talk | contribs) m Positioning styles |
TheMysterys (talk | contribs) m Theme based coloring |
||
| Line 10: | Line 10: | ||
visibility: hidden; | visibility: hidden; | ||
width: 120px; | width: 120px; | ||
text-align: center; | text-align: center; | ||
padding: 5px 0; | padding: 5px 0; | ||
| Line 33: | Line 31: | ||
border-width: 5px; | border-width: 5px; | ||
border-style: solid; | border-style: solid; | ||
border-color: | border-color: #a2a9b1 transparent transparent transparent; | ||
} | } | ||
Revision as of 05:52, 27 September 2023
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px black;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
bottom: 100%;
left: 50%;
margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
position: absolute;
z-index: 1;
}
/* Tooltip Arrow */
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%; /* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #a2a9b1 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}