Template:Tooltip/styles.css: Difference between revisions
Content deleted Content added
No edit summary Tag: Reverted |
No edit summary |
||
| (One intermediate revision by the same user not shown) | |||
Line 1:
/* {{pp-template}} */
/* Base: keep desktop exactly the same */
.tooltip
.tooltip-dotted
/* --- Mobile-only synthesized tooltip (no pointer-events used) --- */
@media (hover: none) and (pointer: coarse) {
.tooltip::after {▼
content: attr(data-title);▼
position: absolute;▼
left: 0;▼
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;▼
/* Bubble text pulled from the existing title attribute */
opacity: 0;▼
▲ .tooltip[title]::after {
visibility: hidden;▼
}▼
▲ position: absolute;
bottom: calc(100% + 8px);
transform: translateX(-50%);
▲ z-index: 1000;
▲ color: #fff;
.tooltip:hover::after { opacity: 1; visibility: visible; }▼
▲ padding: 6px 8px;
▲ font-size: 0.875em;
white-space: normal;
text-align: left;
▲ opacity: 0;
}
/* Arrow */
.tooltip[title]::before {
content: "";
position: absolute;
left: 50%;
bottom: calc(100% + 2px);
transform: translateX(-50%);
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::after,
.tooltip:focus::before,
.tooltip:active::after,
.tooltip:active::before {
opacity: 1;
}
/* Link case: focus/active land on the surrounding <a> */
a:focus > .tooltip[title]::after,
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) */
| |||