kt-tooltip

A short label that appears on hover or focus. Wrap what it describes:

A tooltip is a description, not a name

Note the label on the button above. A tooltip supplements a control; it must never be the only thing naming it. A tooltip that has to be hovered to be read leaves touch users and screen-reader users with an unlabelled button.

The rule: if the trigger has no visible text, it needs its own accessible name, and the tooltip adds detail on top.

How the description reaches the trigger

aria-describedby cannot cross a shadow boundary — an id inside this element's shadow root is invisible to a trigger sitting in the light DOM.

So <kt-tooltip> also puts the text in a light-DOM node, addressed to a slot that does not exist. That keeps it out of the rendered output while leaving it referenceable: an explicit aria-describedby target is read even when it is not displayed.

Where the bubble goes

The bubble is a popover in the top layer, placed from the trigger in viewport coordinates. No ancestor's overflow: hidden can clip it, and it takes no room in the page.

placement is a preference. When that side has no room — top on an icon at the top of the page — the bubble takes the opposite side, and it slides along its side to stay inside the screen. Scrolling or resizing hides it, since a bubble fixed to the viewport would drift away from its trigger.

Holding it open

open shows the bubble whatever the pointer does. It is for a trigger that cannot take focus itself: <kt-input> holds its error icon's tooltip open while the field has focus, so a keyboard user sees the message a mouse user gets on hover.

Dismissal

Escape hides the tooltip while the trigger keeps focus, as WCAG 1.4.13 requires of any content shown on hover or focus.

API