COMPONENTS
Tooltip
Tooltips display informative, yet nonessential text on hover, tap, click or focus.
Tooltips can display definitions, clarifications, or hints. Use tooltips for text that is nonessential to the user journey.
- Label
- Container
- Tip
There are two types of tooltips — standard and dismissible. Both types can either show or hide the tip point. Standard tooltips can be closed by either moving the cursor or selecting anywhere outside of the tooltip area. Dismissible tooltips can only be closed by selecting the close icon.
Tooltips can be placed to the top, bottom, left or right of their related content. For top or bottom tooltips, the placement can be more specifically aligned to top left, top right, bottom left or bottom right. Additionally the placement can be set to automatically adjust position to avoid being cut off by a container or browser edge.
When used above a dark background the tooltip should use reverse coloring.
Tooltips can be displayed in large, medium, small and extra small sizes.
- Avoid hiding essential content within a tooltip.
- Tooltips should not overrun container boundaries or pages.
- Do not use for long text, instead use Popover.
- Do not include rich content such as videos or photos.
- Do not display multiple tooltips simultaneously.
Contents