Tooltip
Wraps its slotted trigger and shows a role="tooltip" popup on hover or
keyboard focus (via focusin/focusout, not just mouse), per
WCAG 1.4.13.
Known limitation: aria-describedby is applied to the <and-tooltip> host
element, not to the slotted trigger itself (a custom element can’t reach into
and mutate arbitrary slotted content). If your trigger is a focusable element
like a <button>, consider also adding aria-describedby on it directly,
pointing at this tooltip, for the most reliable screen-reader announcement.
Example
Section titled “Example”<and-tooltip content="Saves your changes" placement="top"> <and-button variant="outline">Hover me</and-button></and-tooltip>Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
closeDelay | close-delay | Delay in ms before hiding the tooltip. | number | 0 |
content _(required)_ | content | Text content of the tooltip (alternative: use the content slot). | string | undefined |
openDelay | open-delay | Delay in ms before showing the tooltip. | number | 0 |
placement | placement | Preferred placement of the tooltip relative to its trigger. | "bottom" | "left" | "right" | "top" | 'top' |
packages/web-components/src/components/and-tooltip/readme.md — keep this in sync with the
Stencil source, don't hand-edit the numbers.