8,960
edits
MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary Tag: Reverted |
No edit summary Tag: Manual revert |
||
| Line 1: | Line 1: | ||
. -box { | .tooltip-box { | ||
position: absolute; | position: absolute; | ||
background-color: #333; | background-color: #333; | ||
| Line 10: | Line 10: | ||
} | } | ||
. | .tooltip { | ||
cursor: pointer; | cursor: pointer; | ||
border-bottom: 1px dotted; | border-bottom: 1px dotted; | ||
| Line 744: | Line 744: | ||
.custom-table .cell-photo-caption { background-color: trasparent; text-align:center; border:hidden; font-size:100%; } | .custom-table .cell-photo-caption { background-color: trasparent; text-align:center; border:hidden; font-size:100%; } | ||
tooltip-wrapper { | |||
position: relative; | position: relative; | ||
display: inline-block; /* Ensure it fits the content */ | display: inline-block; /* Ensure it fits the content */ | ||
| Line 762: | Line 762: | ||
} | } | ||
/* | /* Tooltip container */ | ||
. -text { | .tooltip-text { | ||
visibility: hidden; | visibility: hidden; | ||
background-color: #918f8f; | background-color: #918f8f; | ||
| Line 776: | Line 776: | ||
top: 70%; /* Center vertically relative to the text */ | top: 70%; /* Center vertically relative to the text */ | ||
left: 50%; /* Center horizontally relative to the text */ | left: 50%; /* Center horizontally relative to the text */ | ||
transform: translate(-50%, 25%); /* Center the | transform: translate(-50%, 25%); /* Center the tooltip */ | ||
opacity: 0; | opacity: 0; | ||
transition: opacity 0.3s ease-in-out; | transition: opacity 0.3s ease-in-out; | ||
width: 200px; /* Allow width to adjust based on content */ | width: 200px; /* Allow width to adjust based on content */ | ||
word-wrap: break-word; /* Break long words to fit within the width */ | word-wrap: break-word; /* Break long words to fit within the width */ | ||
white-space: normal; /* Allow text to wrap within the | white-space: normal; /* Allow text to wrap within the tooltip */ | ||
} | } | ||
/* Show the | /* Show the tooltip text when the wrapper is focused */ | ||
. -wrapper:focus-within . -text { | .tooltip-wrapper:focus-within .tooltip-text { | ||
visibility: visible; | visibility: visible; | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
/* Hide the | /* Hide the tooltip text when the wrapper loses focus */ | ||
. -wrapper:focus:not(:focus-visible) . -text { | .tooltip-wrapper:focus:not(:focus-visible) .tooltip-text { | ||
visibility: hidden; | visibility: hidden; | ||
opacity: 0; | opacity: 0; | ||