Template:Tooltip/styles.css: Difference between revisions
Content deleted Content added
Undo revision 790 by Wikilah admin (talk) Tags: Replaced Undo |
No edit summary |
||
Line 1:
/* {{pp-template}} */
/* Base: keep desktop exactly the same */
border-bottom: 1px dotted;▼
.tooltip { position: relative; display: inline; }
/* --- Mobile-only synthesized tooltip (no pointer-events used) --- */
@media (hover: none) and (pointer: coarse) {
/* Bubble text pulled from the existing title attribute */
.tooltip[title]::after {
content: attr(title);
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
transform: translateX(-50%);
z-index: 1000;
background: rgba(0,0,0,0.85);
color: #fff;
padding: 6px 8px;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
line-height: 1.2;
font-size: 0.875em;
max-width: 26rem;
white-space: normal;
text-align: left;
opacity: 0;
visibility: hidden;
}
/* 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;
visibility: visible;
}
/* 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) */
| |||