WhatTheStar · /design
primitives› tooltip

    Tooltip

    A floating gloss — a sentence, optionally led by a type glyph — anchored to something on the page with CSS Anchor Positioning. Shows on mouseenter and focus after a delay, hides on mouseleave and blur.

    This is a tooltip above
    This is a tooltip below

    — Leading icon

    icon names what the tip is talking about before the sentence does — the same identity the chip in the list carried, which is what makes a hover feel like a continuation rather than a new screen. It defaults to the duotone weight for that reason. tone tints the glyph only; the prose stays at reading contrast, because a coloured paragraph in a 200px box is harder to read, not easier. The glyph aligns to the first line, so a tip that wraps still reads as icon-then-sentence.

    Another island of billions of stars, outside our own. Close, bright, and the main thing that spoils a dark sky. It never clears the horizon from this latitude tonight.

    — Not for naming an icon control

    This is prose about a thing. A rail of glyph buttons needs something else: the name has to be the control's accessible name, appear with no script and no per-item id, and survive a transition:persist shell. That is primitives/_internal/RailLabel.astro, used by FloatingNav and InstrumentBar. Reaching for this primitive there — or for a title attribute — is how two rails 8px apart came to answer a hover in two different ways.