Spaces:
Running
Running
File size: 1,405 Bytes
1f92077 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | /* ============================================================
renderers/_shared/tooltip.css — CSS-only slot tooltips.
One slot string couples cell markup (data-slot), grid
placement, and tip copy (data-tip). Hovering any [data-slot]
that CARRIES non-empty tip copy shows the tip; slots with no
data-tip attribute — or an empty one — never render a box
(the :not([data-tip=""]) guard).
Sized to fit ~100-char interpretive copy (~46ch, wraps).
============================================================ */
.cf-card [data-slot][data-tip]:not([data-tip=""]) {
position: relative;
cursor: help;
}
.cf-card [data-slot][data-tip]:not([data-tip=""])::after {
content: attr(data-tip);
position: absolute;
left: 0;
bottom: calc(100% + var(--space-one));
z-index: 40;
width: max-content;
max-width: min(46ch, 84cqi);
padding: var(--space-two) var(--space-three);
background: var(--fg);
color: var(--bg);
font-family: var(--font);
font-size: var(--size-footnote);
font-weight: 400;
line-height: 1.5;
text-transform: none;
text-indent: 0;
white-space: normal;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-quick) ease;
}
.cf-card [data-slot][data-tip]:not([data-tip=""]):hover::after,
.cf-card [data-slot][data-tip]:not([data-tip=""]):focus-visible::after {
opacity: 1;
visibility: visible;
}
|