Skip to main content Red Hat Design System logo Contribute on Github v2.0.0 Home
About About the design systemHow we buildRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridPersonalization patternsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Call to action Card Code block Dialog Footer Health index Icon Navigation (primary)Planned Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Patterns All patternsAnnouncementCardDisclosureFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTabsTileVideo thumbnail
Accessibility FundamentalsContentDesignDevelopmentContributorsQa and testingAssistive technologiesResources
Design/code status Release notes Get support

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
© 2021-2024 Red Hat, Inc. Deploys by Netlify