Tooltip
The bubble TooltipDirective shows, nol-tooltip, with the tooltip role, which shows its text, and its description below it when one is set. Code normally shows tooltips through the directive, which creates and places the bubble.
Examples
Loading…
States
Loading…
API
Selector nol-tooltip
Import from @noldova/ui.components.angular
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
text | string | Required | The tooltip's text. |
description | string | null | A short description shown below the text, or null, the default, for the text alone. With a description the text is the bubble's title, the description is in the muted text color on the lines below it, and the bubble takes the theme's |
Accessibility
| Key | Action |
|---|---|
| Tab | Moving the focus onto a control with a tooltip shows the tooltip at once, and moving it away hides it. |
| Escape | Hides the tooltip and is marked handled, so a menu, dialog or search around the control stays open until the next Escape. |
The bubble has the tooltip role and shows the text, and the description below it when one is set.
A tooltip whose text differs from its control's accessible name describes the control through aria-describedby, so it is read after the name; one whose text is the name, such as an icon button's label, isn't read twice.
A description is read after the text, and also where the text isn't: on a truncation tooltip, and where the text is the control's name.
It shows at once on keyboard focus, and on hover once the pointer rests 500ms on its control; a page shows one tooltip at a time.
Specification
Loading…