Tooltip

Overview Style Guidelines Code Accessibility

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
© 2021-2024 Red Hat, Inc. Deploys by Netlify
Scroll back to the top