8,960
edits
No edit summary |
No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
/* Ensure the tooltip wrapper is relatively positioned to contain the tooltip */ | |||
.tooltip-wrapper { | .tooltip-wrapper { | ||
position: relative; | position: relative; | ||
| Line 4: | Line 5: | ||
} | } | ||
/* Style the text that will be underlined on hover */ | |||
.underline-hover { | .underline-hover { | ||
position: relative; | position: relative; | ||
| Line 10: | Line 12: | ||
cursor: pointer; /* Change the cursor to indicate clickable text */ | cursor: pointer; /* Change the cursor to indicate clickable text */ | ||
outline: none; /* Remove the outline when focused */ | outline: none; /* Remove the outline when focused */ | ||
} | } | ||
| Line 20: | Line 17: | ||
.tooltip-text { | .tooltip-text { | ||
visibility: hidden; | visibility: hidden; | ||
background-color: # | background-color: #555; | ||
color: # | color: #fff; | ||
text-align: center; | text-align: center; | ||
padding: | padding: 10px; /* Adjust padding to suit the content */ | ||
border-radius: 6px; | border-radius: 6px; | ||
/* Positioning and size */ | /* Positioning and size */ | ||
position: absolute; | position: absolute; | ||
z-index: | z-index: 9999; /* Ensure it's on top of all objects */ | ||
top: 50%; /* Center vertically relative to the text */ | top: 50%; /* Center vertically relative to the text */ | ||
left: | left: 110%; /* Position to the right of the text */ | ||
transform: | transform: translateY(-50%); /* Center the tooltip vertically */ | ||
opacity: 0; | opacity: 0; | ||
transition: opacity 0.3s ease-in-out; | transition: opacity 0.3s ease-in-out; | ||