8,856
editsVector only
No edit summary |
(Vector only) |
||
Line 1: | Line 1: | ||
/* | |||
CSS tooltip implementation. Usage in markup: | |||
<some-element aria-label="tooltip text here"> | |||
normal text | |||
</some-element> | |||
*/ | |||
[aria-label]:hover, [aria-label]:focus {position: relative} | |||
[aria-label]:hover::after, | |||
[aria-label]:focus::after { | |||
position: absolute; | |||
white-space: pre; | |||
line-height: 1; | |||
padding: 0.3rem; | |||
content: attr(aria-label); | |||
background-color: var(--aria-label-tooltip-bg); | |||
color: var(--aria-label-tooltip-fg); | |||
border: var(--aria-label-tooltip-border); | |||
text-decoration: unset; | |||
/* See optional override below. */ | |||
bottom: 100%; | |||
left: 0; | |||
} | |||
/* Changes the tooltip position. */ | |||
[aria-label].aria-label-top-rig:hover::after, | |||
[aria-label].aria-label-top-rig:focus::after { | |||
bottom: 100%; | |||
left: unset; | |||
right: 0; | |||
} | |||
/* Optional class for indicating tooltip presence via underline. */ | |||
.bg3wiki-help-tooltip[aria-label] { | |||
cursor: help; | |||
text-decoration-line: underline; | |||
text-decoration-style: dotted; | |||
text-decoration-thickness: 1px; | |||
text-underline-offset: calc(1ex / 2); | |||
} | |||
/* CSS placed here will affect users of the Vector skin */ | /* CSS placed here will affect users of the Vector skin */ | ||
html { | html { |