Holo Tooltip
The <holo-tooltip> component shows a short, non-interactive hint for a trigger element referenced
by its id via the for prop. It uses the Popover API (popover="manual" +
showPopover()/hidePopover()) triggered on the referenced element’s hover/focus, is linked to the
trigger via aria-describedby, and is hidden on blur/mouseleave/Esc.
Positioning note: CSS anchor positioning (anchor-name/position-anchor) is not yet broadly
supported across engines, so this component falls back to getBoundingClientRect()-based fixed
positioning rather than relying on anchor positioning alone.
Why for instead of a trigger slot? Referencing the trigger by id keeps the trigger element in
its natural place in the light DOM (so it isn’t affected by the tooltip’s own layout) and makes the
aria-describedby wiring straightforward and explicit.
Live Previews
Section titled “Live Previews”Placements
Section titled “Placements”<button id="trigger">Hover or focus me</button> <holo-tooltip for="trigger" placement="top">Helpful hint text</holo-tooltip>API Reference
Section titled “API Reference”Properties
Section titled “Properties”| Property | Attribute | Description | Type | Default |
| ----------- | ----------- | ------------------------------------------------------------------------------- | --------------------------------------- | ---------- |
| for | for | The id of the trigger element (in the light DOM) that this tooltip describes. | string | (required) |
| placement | placement | Which side of the trigger the tooltip is positioned on. | 'top' \| 'bottom' \| 'start' \| 'end' | 'top' |