/* CSS for both hover-invoked and click-invoked tooltips. * * Wired tooltips live under with the `popover` attribute (set by * tooltip.ts). Each one carries an inline `position-anchor: --tooltip-N` * matched by an inline `anchor-name: --tooltip-N` on its trigger. */ /* CSS for all parents of tooltips (hover-invoked or click-invoked). */ .miser, .tipper { /* Since tooltips render right beneath their parents, the positioning would * look rather odd in cases where the parent lives on multiple lines. * Thankfully, such parents tend to be so short that we can usually afford to * always display them on a single line and prevent wrapping on whitespace. */ white-space: nowrap; } .tipper:hover { background-color: #f1f8ff; border-radius: 4px; } /* .miser is specific to click-invoked elements. */ .miser { cursor: pointer; } /* .tooltip represents either a click-invoked or hover-invoked tooltip. * The selector below applies once tooltip.ts has stamped the `popover` * attribute on the element. */ .tooltip[popover] { /* Reset the UA popover defaults so anchor positioning controls placement. */ inset: auto; margin: 0; border: 0; /* Default placement: directly below the parent, aligned with its left edge. */ position: fixed; top: anchor(bottom); left: anchor(left); /* Stretch the positioning area to the viewport's right edge. */ right: 0; /* Align to the anchor's left edge by default. * If the tooltip is too wide, this triggers the "smart shift" behavior * to slide it leftwards rather than overflowing. */ justify-self: start; /* The tip has an opaque background to hide content behind it. */ background-color: white; /* Add some shade to make it pretty. */ box-shadow: 0 8px 16px rgb(0 0 0 / 20%); /* Some padding. */ padding: 0 2px; /* Try expanding without wrapping, up to 500px or 80% of the viewport width, * whichever is smaller. On large screens, that's the former. On small * screens, that's the latter. */ width: max-content; max-width: min(500px, 80vw); /* Our parent elements don't wrap text on whitespace (see above). They can * afford that because they tend to be very short. * We must override this rule in order to allow (potentially long) tooltips * to wrap. */ white-space: normal; /* Fade in/out. `allow-discrete` lets us animate across the discrete * display:none ↔ display:block boundary the popover toggles on. */ opacity: 0; transition: opacity 0.15s ease-in-out, overlay 0.15s allow-discrete, display 0.15s allow-discrete; & label { /* Then each label renders on a separate line. */ display: block; } /* .above causes tooltips to render above their parent element. */ &.above { top: auto; bottom: anchor(top); /* Move the box shadow to prevent it from hiding the parent. */ box-shadow: 0 -8px 16px rgb(0 0 0 / 20%); } /* Default: left edge pinned to the anchor's left edge (via `left: anchor(left)` above). * If that would cause the tooltip to overflow the viewport on the right, * the browser falls back to the rule below, which pins the tooltip's * right edge to the viewport's right edge — the minimum shift needed * to prevent overflow. */ position-try-fallbacks: --shift-to-fit; &:popover-open { opacity: 1; @starting-style { opacity: 0; } } } .tipper:has(.tipper):hover { background-color: #fff2c5; } @position-try --shift-to-fit { left: auto; right: 8px; }