Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Tooltip

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-tooltipImportingUsagerh-tooltip

Importing

Add rh-tooltip to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-tooltip/rh-tooltip.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Usage 

<rh-tooltip>
  <rh-button>Tooltip</rh-button>
  <span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>

<script type="module">
  import '@rhds/elements/rh-button/rh-button.js';
  import '@rhds/elements/rh-tooltip/rh-tooltip.js';
</script>
Copy to Clipboard Wrap lines

rh-tooltip

A tooltip provides contextual information on hover, focus, or tap. Content should be brief. Authors must ensure the invoking element is focusable for keyboard and screen reader users. Pressing Escape dismisses the tooltip. When silent is set, authors must provide an alternative accessible label.

Theming

Themable

This element uses Red Hat design system theming and can be used in themable contexts.

Slots 2

Slot Name Summary Description
[default]

Invoking element

Place the invoking element here, i.e. the element which when hovered or focused causes the tooltip to display. Must be inline, focusable content so that keyboard and screen reader users can activate the tooltip.
Note: [default] unnamed slots do not have a slot="name" attribute.
content

Tooltip content

Place tooltip content here. Overrides the content attribute. Content is announced to screen readers via a live region unless the silent attribute is set.

Attributes 3

Attribute DOM Property Description Type Default
position position

The position of the tooltip, relative to the invoking content

 
Side | AlignedPlacement
 
'top'
content content

Tooltip content. Overridden by the content slot

 
string
 
unknown
silent silent

When true, disables screen reader announcements for tooltip content. Only use when another accessible label is provided.

 
boolean
 
false

Methods 2

Method Name Description
show()

Show the tooltip
hide()

Hide the tooltip

Events 0

None

CSS Shadow Parts 0

None

CSS Custom Properties 9 9

CSS Property Description Default
--rh-tooltip-arrow-size

Arrow indicator size

 var(--rh-tooltip__arrow--Width, 11px)
--rh-tooltip-max-width

Maximum inline size of the tooltip panel

 var(--rh-tooltip--MaxWidth, 18.75rem)
--rh-tooltip-content-padding-block-start

Block-start padding for tooltip content

 var(--rh-tooltip__content--PaddingTop, var(--rh-space-lg, 16px))
--rh-tooltip-content-padding-block-end

Block-end padding for tooltip content

 var(--rh-tooltip__content--PaddingBottom, var(--rh-space-lg, 16px))
--rh-tooltip-content-padding-inline-start

Inline-start padding for tooltip content

 var(--rh-tooltip__content--PaddingLeft, var(--rh-space-lg, 16px))
--rh-tooltip-content-padding-inline-end

Inline-end padding for tooltip content

 var(--rh-tooltip__content--PaddingRight, var(--rh-space-lg, 16px))
--rh-tooltip-content-font-size

Tooltip content font size

 var(--rh-tooltip__content--FontSize, var(--rh-font-size-body-text-sm, 0.875rem))
--rh-tooltip-content-color

Tooltip text color in light mode

Tooltip text color in dark mode

 var(--rh-color-text-primary-on-dark, #ffffff)
--rh-tooltip-content-background-color

Tooltip surface in light mode

Tooltip surface in dark mode

Arrow surface in light mode

Arrow surface in dark mode

 var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515))
CSS Property Description Default Reason
--rh-tooltip__arrow--Width

11px

use --rh-tooltip-arrow-size
--rh-tooltip--MaxWidth

18.75rem

use --rh-tooltip-max-width
--rh-tooltip__content--PaddingTop

var(--rh-space-lg, 16px)

use --rh-tooltip-content-padding-block-start
--rh-tooltip__content--PaddingBottom

var(--rh-space-lg, 16px)

use --rh-tooltip-content-padding-block-end
--rh-tooltip__content--PaddingLeft

var(--rh-space-lg, 16px)

use --rh-tooltip-content-padding-inline-start
--rh-tooltip__content--PaddingRight

var(--rh-space-lg, 16px)

use --rh-tooltip-content-padding-inline-end
--rh-tooltip__content--FontSize

var(--rh-font-size-body-text-sm, 0.875rem)

use --rh-tooltip-content-font-size
--rh-tooltip__content--Color

var(--rh-color-text-primary-on-light, #151515)

use --rh-tooltip-content-color
--rh-tooltip__content--BackgroundColor

var(--rh-color-surface-darkest, #151515)

use --rh-tooltip-content-background-color

Design Tokens 9

Token Description Copy
--rh-line-height-body-text

Tooltip content line height

Line height for body text
--rh-box-shadow-sm

Tooltip panel shadow

Small box shadow
--rh-border-radius-default

Tooltip panel border radius

3px border radius; Example: Card
--rh-space-lg

16px spacer
--rh-font-size-body-text-sm

14px font size
--rh-color-text-primary-on-light

Primary text color for light theme
--rh-color-text-primary-on-dark

Primary text color for dark theme
--rh-color-surface-lightest

Primary surface (light theme)
--rh-color-surface-darkest

Primary surface (dark theme)
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify