Template:Tooltip/styles.css: Difference between revisions
Content deleted Content added
No edit summary Tag: Reverted |
No edit summary |
||
| (3 intermediate revisions by the same user not shown) | |||
Line 1:
/*
/* Base: keep desktop exactly the same */
/* Term */▼
.tooltip
/* --- Mobile-only synthesized tooltip (no pointer-events used) --- */
@media (hover: none) and (pointer: coarse) {
▲ border-bottom: 1px dotted currentColor;
/* Bubble text pulled from the existing title attribute */
content: attr(title);
position: absolute;▼
bottom: calc(100% + 8px);
padding: 6px 8px;▼
border-radius: 6px;▼
font-size: 0.875em;▼
line-height: 1.35;▼
max-width: 90vw;▼
box-shadow: 0 8px 24px rgba(0,0,0,.25);▼
opacity: 0;▼
▲ padding: 6px 8px;
▲ transform: translateY(3px);
▲ font-size: 0.875em;
white-space: normal;
text-align: left;
▲ opacity: 0;
}
.tooltip a:focus ~ .tooltip-body,▼
opacity: 1;▼
▲ visibility: visible;
transform: translateY(0);▼
▲ position: absolute;
bottom: calc(100% + 2px);
▲ background: none;
border: 6px solid transparent;
border-top-color: rgba(0,0,0,0.85);
opacity: 0;
visibility: hidden;
}
/* Non-link: the <span> itself is focusable (tabindex=0) */
.tooltip:focus::before,
.tooltip:active::after,
.tooltip:active::before {
▲ opacity: 1;
visibility: visible;
}
/* Link case: focus/active land on the surrounding <a> */
a:focus > .tooltip[title]::before,
a:active > .tooltip[title]::after,
a:active > .tooltip[title]::before {
opacity: 1;
visibility: visible;
}
}
/* Reduced-motion users (nothing to transition here, so nothing needed) */
▲.tooltip-target:focus,
| |||