Tooltips are brief floating messages intended to help a user understand a specific item or feature.
Examples & Guidelines
- Tooltips typically are triggered by hovering/focusing or by clicking. This must be specified for each instance. Triggering by hover should be limited as this implementation doesn’t work for touch devices.
- Tooltips that are triggered by hover or focus should disappear when focus shifts or the user mouses away from the target.
- Tooltips that are triggered by clicking should disappear when the user clicks away from the tooltip.
- Tooltips should be brief. They should not contain rich information like images or buttons.
Tooltips should be centered on their target. If the tooltip is cut off by the edge of the viewport, flip its orientation.