Template:HoverEffect/styles.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
.hover-tooltip { | .hover-tooltip { | ||
text-decoration: none; /* | text-decoration: none; /* No underline */ | ||
color: | color: inherit; /* Keep the text color as plain text */ | ||
cursor: | cursor: help; /* Optional: Change cursor to a help pointer */ | ||
position: relative; /* | position: relative; /* Needed for tooltip */ | ||
} | } | ||
.hover-tooltip | .hover-tooltip:hover::after { | ||
content: attr(title); /* Display the tooltip content */ | |||
position: absolute; | position: absolute; | ||
top: 1.5em; | top: 1.5em; /* Adjust to position tooltip below the text */ | ||
left: 0; | left: 0; | ||
background-color: white; | background-color: white; | ||
| Line 16: | Line 16: | ||
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); | ||
white-space: nowrap; | white-space: nowrap; | ||
font-size: 90%; | font-size: 90%; | ||
color: black; /* Tooltip text color */ | color: black; /* Tooltip text color */ | ||
z-index: 1000; | |||
display: block; | |||
display: block; | |||
} | } | ||
Revision as of 08:39, 19 December 2024
.hover-tooltip {
text-decoration: none; /* No underline */
color: inherit; /* Keep the text color as plain text */
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: 1px solid gray;
border-radius: 5px;
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;
}