Overlay
Tooltip
An attribute directive that adds a tooltip to any element. Uses a viewport-aware overlay layer so the tooltip flips to stay on-screen.
[llmTooltip]Demo
Live PreviewReact
html
<llm-button llmTooltip="Save your changes">Save</llm-button>
<llm-button
llmTooltip="Copy to clipboard"
llmTooltipPosition="right"
variant="outline"
>Copy</llm-button>API (Angular)
| Prop | Type | Default | Description |
|---|---|---|---|
llmTooltip | string | — | Tooltip text content (required) |
llmTooltipPosition | 'above' | 'below' | 'left' | 'right' | 'above' | Preferred position |
llmTooltipDisabled | boolean | false | Disables the tooltip |
llmTooltipShowDelay | number | 300 | Delay in ms before showing |
llmTooltipHideDelay | number | 0 | Delay in ms before hiding |
Import
ts
import { LlmTooltip } from '@atelier-ui/angular';Accessibility
ARIA roletooltip
| Key | Action |
|---|---|
| Tab (focus trigger) | Show the tooltip. It hides when focus leaves. |
| Escape | Dismiss the tooltip while focus stays on the trigger. |
- Uses aria-describedby — the tooltip supplements, never replaces, the trigger's accessible name.
- Tooltips are shown on focus, not only on hover, so keyboard users get the same affordance.
- Never put interactive content (links, buttons) inside a tooltip — it cannot be reached by keyboard.
See the accessibility overview for the site-wide WCAG stance.