COMPONENTS
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.
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.
Contents