Tooltip
stable 1.4 kB<hkTooltip>A directive, not a component. Shows on hover and on keyboard focus — the second being the one most tooltips forget — and stays out of the accessibility tree as a duplicate label.
#hint#directive
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| hkTooltip | string | '' | Tooltip text. Empty disables it. |
| hkTooltipPlacement | 'top' | 'bottom' | 'left' | 'right' | 'top' | Preferred side; flips at the viewport edge. |
| hkTooltipDelay | number | 400 | Milliseconds before it appears on hover. |
| hkTooltipDisabled | boolean | false | Suppresses it without removing the directive. |
Keyboard
- Tab Focus shows the tooltip
- Escape Dismisses it while focus stays put
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-tooltip-bg | #0f172a | Bubble background. |
| --hk-tooltip-text | #ffffff | Bubble text colour. |
| --hk-tooltip-delay | 400ms | Hover delay. |
Accessibility
- Appears on focus as well as hover, so it is not mouse-only.
- Linked with aria-describedby; when the host already has that text as its label the tooltip is hidden from the tree instead of being read twice.
- Escape dismisses without moving focus, per the ARIA tooltip pattern.