Tooltip directive toolkit that offers a seamless and accessible solution for creating tooltips with customizable positioning and appearance.
Installation
Add and import the module into your imports section.
Modules
<docs-code [code]="codeImportsModule" language="ts" />
Standalone directives
<docs-code [code]="codeImportsDirectives" language="ts" />
Anatomy
Directive's set structure.
<docs-anatomy [node]="componentStructure" />
Input props
TooltipRoot Attribute Directive
The root directive that contains the tooltip trigger and content. Manages the tooltip state.
<docs-table [columns]="columnsInput" [rows]="rootInputRows" />
TooltipTrigger Attribute Directive
The directive that marks an element as the tooltip trigger. The tooltip will be shown when hovering over this element.
| Attribute | Value |
|---|---|
| data-state | "open" | "partly-opened" | "closed" |
| aria-describedby | ID of the tooltip content element |
TooltipContent Attribute Directive
The directive that defines the content of the tooltip. It is applied to an ng-template.
| Input | Default | Type | Description |
|---|---|---|---|
| position | top | "top" | "right" | "bottom" | "left" | The preferred position of the tooltip relative to the trigger. |
| avoidCollisions | true | boolean | Whether the tooltip should flip its position when it would collide with the viewport boundaries. |
| collisionPadding | 0 | number | { top?: number; left?: number; bottom?: number; right?: number } | Padding between the tooltip and the viewport edges when avoiding collisions. |
| align | center | "start" | "center" | "end" | Alignment of the tooltip relative to the trigger element. |
| alignOffset | 0 | number | Offset in pixels for the tooltip alignment. |
| sticky | "partial" | "partial" | "always" | Controls the behavior when repositioning the tooltip to avoid collisions. |
| sideOffset | 0 | number | Offset in pixels between the tooltip and the trigger element. |
| Output | Returns | Description |
|---|---|---|
| tooltipRendered | { position: TooltipPosition; triggerElement: HTMLElement; contentElement: HTMLElement } | Event emitted when the tooltip is rendered with its final position and elements. |
| Attribute | Value |
|---|---|
| data-state | "open" | "partly-opened" | "closed" |
| data-position | "top" | "right" | "bottom" | "left" |
| data-align | "start" | "center" | "end" |
| role | "tooltip" |
TooltipArrow Attribute Directive
Optional directive to add an arrow to the tooltip that points toward the trigger element.
| Input | Default | Type | Description |
|---|---|---|---|
| arrowSize | 8 | { width: number; height: number } | number | Size of the arrow in pixels. Can be a single number for square arrows or an object for custom dimensions. |
State
TooltipService allows to access the tooltip properties.
Access directive API with exportAS
We can access the state of the tooltip using a template variable. All the directives expose themselves with the same name. We have access to the directive's attributes and also the state service.
Example
We could use it with any other directive. For example with #root="vacTooltipRoot" and access the state.
<docs-code [code]="templateVariableExample" language="html" />
State API - TooltipService
Documentation for the tooltip state service API.
Variables
<docs-table [columns]="stateVarsColumns" [rows]="stateRows" />
Types and interfaces
<docs-code [code]="typesAndInterfaces" language="ts" />
Features
- Customizable positions and alignments
- Smart collision detection and avoidance
- Optional arrow with customizable size
- Configurable open and close delays
- Mouse hover tracking across tooltip and trigger
- Proper ARIA attributes for accessibility
Accessibility
This Tooltip set of directives is designed in accordance with the WAI-ARIA Authoring Practices Guide. The tooltip trigger is properly connected to the tooltip content using aria-describedby, and the tooltip content has the appropriate role="tooltip" attribute. This ensures our component meets modern accessibility standards, providing an inclusive user experience.