Tooltip
A tooltip displays a piece of contextual information to explain a feature or terminology.
1. Anatomy
Value | Purpose |
aria-haspopup | Set on the owning component to indicate the presence of the tooltip. |
role= “tooltip” | Describe the role |
aria-describedby | Explain what the tooltip is about. |
2. Configurations
2.1 Trigger action
There are 2 trigger actions: hover and click. Click is used as default.
2.2 Placement
There are 13 options of placement. Auto is used as default. See the below chart for the rest of the custom placement.
3. Behavior
3.1 Click as the trigger action
Click is used as default.
3.2 Hover as the trigger action
Please note hover does not have accessibility support. Do not use hover when the popover’s content is important.
5. Keyboard experience
The keyboard experience only applies when "click" is used as the trigger action.
Please note hover does not have accessibility support. Do not use hover when the popover’s content is important.
7. Resilience & responsiveness
Tooltips have a maximum width of 350px. The container keeps growing with the content until it hits 350px. The content wraps to the following line.
The height of a tooltip wraps around the content. It grows automatically as the content’s height grows.
