Template:HoverEffect/styles.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.hover-tooltip { | .hover-tooltip { | ||
text-decoration: none; /* No underline */ | text-decoration: none; /* No underline */ | ||
color: | color: blue; | ||
cursor: help; /* Optional: Change cursor to a help pointer */ | cursor: help; /* Optional: Change cursor to a help pointer */ | ||
position: relative; /* Needed for tooltip */ | position: relative; /* Needed for tooltip */ | ||
| Line 12: | Line 12: | ||
left: 0; | left: 0; | ||
background-color: white; | background-color: white; | ||
border: | border: 0.75px solid gray; | ||
border-radius: | border-radius: 2px; | ||
padding: 5px; | padding: 5px; | ||
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); | box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); | ||
Latest revision as of 08:42, 19 December 2024
.hover-tooltip {
text-decoration: none; /* No underline */
color: blue;
cursor: help; /* Optional: Change cursor to a help pointer */
position: relative; /* Needed for tooltip */
}
.hover-tooltip:hover::after {
content: attr(title); /* Display the tooltip content */
position: absolute;
top: 1.5em; /* Adjust to position tooltip below the text */
left: 0;
background-color: white;
border: 0.75px solid gray;
border-radius: 2px;
padding: 5px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
white-space: nowrap;
font-size: 90%;
color: black; /* Tooltip text color */
z-index: 1000;
display: block;
}