|
/* Wrapper{{pp-template}} */
.tooltip-dotted .tooltip-target { ▼.tooltip { position: relative; display: inline-block; }
border-bottom: 1px dotted currentColor; ▼
/* Term */
.tooltip-target { cursor: help; }
/* Dotted underline (sanitiser-safe) */
▲.tooltip-dotted .tooltip-target {
text-decoration: none;
▲ border-bottom: 1px dotted currentColor;
}
/* Popup */
.tooltip .tooltip-body {
position: absolute;
left: 0;
top: 100%;
margin-top: 6px;
padding: 6px 8px;
background: #222;
color: #fff;
border-radius: 6px;
font-size: 0.875em;
line-height: 1.35;
max-width: 90vw;
box-shadow: 0 8px 24px rgba(0,0,0,.25);
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(3px);
}
/* Show on hover and on focus (no :focus-within) */
.tooltip:hover .tooltip-body,
.tooltip .tooltip-target:focus ~ .tooltip-body,
.tooltip a:focus ~ .tooltip-body,
.tooltip .tooltip-toggle:focus ~ .tooltip-body {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* “ⓘ” toggle for link case (span, not <button>) */
.tooltip .tooltip-toggle {
margin-left: .25em;
padding: 0 .25em;
border: 0;
background: none;
font: inherit;
line-height: 1;
color: inherit;
}
/* Basic focus ring (omit outline-offset) */
.tooltip-target:focus,
.tooltip .tooltip-toggle:focus {
outline: 2px solid #99c2ff;
}
|