Template:Tooltip/styles.css: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
Undo revision 783 by Wikilah admin (talk) Tags: Replaced Undo |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* {{pp-template}} */ |
/* {{pp-template}} */ |
||
.tooltip-dotted { |
|||
/* Base: keep desktop exactly the same */ |
|||
| ⚫ | |||
.tooltip { position: relative; display: inline; } |
|||
cursor: help; |
|||
| ⚫ | |||
/* --- 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) */ |
|||
Latest revision as of 09:29, 1 October 2025
/* {{pp-template}} */
/* Base: keep desktop exactly the same */
.tooltip { position: relative; display: inline; }
.tooltip-dotted { border-bottom: 1px dotted; cursor: help; }
/* --- 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) */