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; /* Remove underline */ | |||
text-decoration: none; | color: blue; /* Make text appear like a link */ | ||
color: blue; | cursor: pointer; /* Show pointer on hover */ | ||
cursor: pointer; | position: relative; /* Enable tooltip positioning */ | ||
} | } | ||
.hover-tooltip span { | .hover-tooltip span { | ||
display: none; | display: none; /* Initially hide the tooltip */ | ||
position: absolute; | position: absolute; | ||
top: 1.5em; | top: 1.5em; | ||
| Line 15: | Line 15: | ||
border-radius: 5px; | border-radius: 5px; | ||
padding: 5px; | padding: 5px; | ||
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); | |||
z-index: 1000; | z-index: 1000; | ||
white-space: nowrap; | white-space: nowrap; | ||
font-size: 90%; | font-size: 90%; | ||
color: black; /* Tooltip text color */ | |||
} | } | ||
.hover-tooltip:hover span { | .hover-tooltip:hover span { | ||
display: block; | display: block; /* Show tooltip on hover */ | ||
} | } | ||
Revision as of 08:37, 19 December 2024
.hover-tooltip {
text-decoration: none; /* Remove underline */
color: blue; /* Make text appear like a link */
cursor: pointer; /* Show pointer on hover */
position: relative; /* Enable tooltip positioning */
}
.hover-tooltip span {
display: none; /* Initially hide the tooltip */
position: absolute;
top: 1.5em;
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);
z-index: 1000;
white-space: nowrap;
font-size: 90%;
color: black; /* Tooltip text color */
}
.hover-tooltip:hover span {
display: block; /* Show tooltip on hover */
}