Tooltips

Displays very short, helpful information on mouse-over, select or keyboard focus.

Design System Guidelines

These are listed in order of preference (i.e. try using a Tooltip On Top before a Tooltip On Right, etc.).

Tooltips are supposed to approximate a square aspect ratio as they change size to accommodate different content. You can manually control their aspect ratio using the "tooltip-inner-" classes.

Tooltip from Icon (Top)

Tooltip from Icon (Right)

Tooltip from Icon (Bottom)

Tooltip from Icon (Left)

Tooltip from Text (Top)

Tooltip from Text (Right)

Tooltip from Text (Bottom)

Tooltip from Text (Left)