Components

Tooltip

Tooltip is a small, floating content block triggered via hovering over or focusing on an element.

For more information and examples of how to use Tooltip in practice, check out the overlays section of our contextual messaging pattern.

Do's and don'ts

do
Use Tooltips sparingly
do
Make content concise, contextual and easy to understand
do
Use sentence case for Tooltip text
don't
Use for messaging critical to task completion
don't
Use focusOnContent prop for tooltips
don't
Include interactive elements within tooltips