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.
[atlTooltip]Demo
Live PreviewReact
html
<atl-button atlTooltip="Save your changes">Save</atl-button>
<atl-button
atlTooltip="Copy to clipboard"
atlTooltipPosition="right"
variant="outline"
>Copy</atl-button>API (Angular)
| Prop | Type | Default | Description |
|---|---|---|---|
atlTooltip | string | — | Tooltip text content (required) |
atlTooltipPosition | 'above' | 'below' | 'left' | 'right' | 'above' | Preferred position |
atlTooltipDisabled | boolean | false | Disables the tooltip |
atlTooltipShowDelay | number | 300 | Delay in ms before showing |
atlTooltipHideDelay | number | 0 | Delay in ms before hiding |
Import
ts
import { AtlTooltip } 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.