Tooltip

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Style
  2. Theme
  3. Configuration
  4. Space
  5. Animation
  6. Interaction states
  1. Style
  2. Theme
  3. Configuration
  4. Space
  5. Animation
  6. Interaction states

Style

A tooltip is a container with text that includes an arrow and sometimes a drop shadow. It can be anchored to various elements like buttons, icons, etc.

Anatomy

Anatomy of a tooltip with annotations; number 1 is pointing to the container, number 2 is pointing to the text, number 3 is pointing to the arrow, and number 4 is pointing to the trigger
  1. Container
  2. Text
  3. Arrow
  4. Trigger

Theme

A tooltip is available in both light and dark themes. The dark theme tooltip container does not include a drop shadow.

Light theme

Light theme tooltip which is black

Dark theme

Dark theme tooltip which is white

Configuration

All badges have the same height and border radius.

How a tooltip is constructed showing alignment, border radius, and arrow details

Space

Tooltip spacing both within the element and in between the element and trigger

Animation

A tooltip has a 300ms entry delay on hover by default, but this can be customized. For example, if you would like it to appear immediately, set the delay to 0ms.

Interaction states

A tooltip appears near an icon or element on hover, focus, or when tapped. A tooltip contains only text and is not interactive.

Tooltip trigger interaction states
Edit this page on GitHub