Tooltip

Overview Style Guidelines Code Demos Accessibility
  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
Example Token Description
8 --rh-space-md 8px spacer
16 --rh-space-lg 16px spacer

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