Overlay
Tooltip
An attribute directive that adds a tooltip to any element. Built on @angular/cdk/overlay for viewport-aware positioning.
[llmTooltip]Demo
Live PreviewReact
jsx
<LlmTooltip tooltip="Save your changes">
<LlmButton>Save</LlmButton>
</LlmTooltip>
<LlmTooltip tooltip="Copy to clipboard" position="right">
<LlmButton variant="outline">Copy</LlmButton>
</LlmTooltip>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.