Tooltip

Tooltips are generally used to provide additional information about the hover target (usually a concise description or help text). In some cases, tooltips can be used to provide a peek at the detailed information that would be available if the user were to click on the target.

Since hovering is not an interaction that’s available on touch devices, tapping on the target can show the tooltip (because the target would become focused). Even so, this interaction is not optimized for use on touch devices (eg, mobile).

Use Popover instead when you need a floating panel that has interactive elements.

Anatomy

Options

Target

The element that triggers this tooltip (ie, when the user hovers over or focuses on the element). The tail direction will automatically be adjusted to try to keep the tooltip visible regardless of the target’s position in the viewport.

Content

You can provide any content you’d like, but do not include interactive elements

Size

Specify if/how this component resizes horizontally and vertically

Patterns

While you can provide whatever content you’d like, we recommend using one of the following patterns if possible.

Description

This is the simplest layout available

Title + Description

For when you need a visually prominent headline

Guidelines

Targets should be focus-able

Targets should be keyboard-accessible (and should include a focus state)

Don’t embed interactive elements

Since the tooltip is dismissed when the cursor leaves the hover target, the tooltip would disappear before users are able to interact with any elements embedded inside it

Use sparingly

Since this component isn’t optimized for touch devices, use it judiciously

Related components

• Popover

‍