New wiki

Template:Tooltip/styles.css: Difference between revisions

Browse history interactively
← Older edit
Content deleted Content added
No edit summary
Tag: Reverted
No edit summary
 
(5 intermediate revisions by the same user not shown)
Line 1:
/* Base target{{pp-template}} */
.tooltip {
position: relative;
cursor: help;
}
 
/* Base: keep desktop exactly the same */
/* Dotted underline option (sanitizer-safe fallback) */
.tooltip { position: relative; display: inline; }
.tooltip-dotted {
.tooltip-dotted { border-bottom: 1px dotted; cursor: help; }
text-decoration: underline;
}
 
/* --- Mobile-only synthesized tooltip (no pointer-events used) --- */
/* Popup body */
@media (hover: none) and (pointer: coarse) {
.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; /* avoid off-screen on mobile */
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;
content: attr(title);
transition: opacity .15s ease-in-out;
white-space position: normalabsolute;
left: 50%;
}
bottom: calc(100% + 8px);
transform: translateX(-50%);
z-index: 1000;
 
background: rgba(0,0,0,0.85);
/* Arrow */
color: #fff;
.tooltip .tooltip-body::after {
content padding: ""6px 8px;
border-radius: 4px;
position: absolute;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
top: -6px;
left line-height: 12px1.2;
font-size: 0.875em;
border: 6px solid transparent;
border-bottom max-colorwidth: #22226rem;
white-space: normal;
}
text-align: left;
 
opacity: 0;
/* Show states (split to avoid invalid selector list) */
visibility: hidden;
.tooltip:hover > .tooltip-body {
}
opacity: 1;
 
visibility: visible;
/* Arrow */
}
.tooltip:focus > .tooltip-body[title]::before {
opacity content: 1"";
visibility position: visibleabsolute;
left: 50%;
}
bottom: calc(100% + 2px);
.tooltip.tooltip--open > .tooltip-body {
transform: translateX(-50%);
opacity: 1;
border: 6px solid transparent;
visibility: visible;
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) */
/* Optional flips (set via JS) */
.tooltip.tooltip--align-right > .tooltip-body {
left: auto;
right: 0;
}
.tooltip.tooltip--align-right > .tooltip-body::after {
left: auto;
right: 12px;
}
.tooltip.tooltip--above > .tooltip-body {
top: auto;
bottom: 100%;
margin-top: 0;
margin-bottom: 6px;
}
.tooltip.tooltip--above > .tooltip-body::after {
top: auto;
bottom: -6px;
border-bottom-color: transparent;
border-top-color: #222;
}
Retrieved from "https://insurerbrain.mediawiki.site/wiki/Template:Tooltip/styles.css"