Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Tooltip

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleColor schemeConfigurationSpaceAnimationInteraction statesStyleColor schemeConfigurationSpaceAnimationInteraction 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

Color scheme

A tooltip is available for both light and dark schemes. The dark scheme tooltip container does not include a drop shadow.

Light theme tooltip which is black 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
© 2021-2025 Red Hat, Inc. Deploys by Netlify