Components-Tooltips¶
Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element. Tooltips identify an element when they are activated. They may contain brief helper text about its function.
Summoned by:¶
- Hovering over an element with a cursor
- Focusing on an element with a keyboard (usually the tab key)
- Upon touch
Usage¶
- Use tooltips for interactive imagery.
- Tooltips don’t display rich information including images and formatted text.
- Tooltips are different than ALT-attributes, which are intended primarily for static images.
- Tooltips don’t have directional arrows; instead, they rely on motion emanating from the source to convey direction. ## Interaction A tooltip is triggered by tapping and holding an item. Keep the tooltip displayed as long as the user continues to hold the element. ### Timing:
- On lift, display the tooltip for 1.5 seconds.
- If the user takes another action before that time ends, the tooltip will disappear.