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 PatternsCardTabsFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTile
Personalization All Personalization PatternsAnnouncement
Accessibility 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 is a floating text area that provides helpful or contextual information on hover, focus, or tap.

Slots 2
Slot Name Summary Description

Place invoking element here, i.e. the element which when hovered the tooltip will display. Must be inline content.

content

Place tooltip content here. Overrides the content attribute.

Attributes 2
Attribute DOM Property Description Type Default
position position

The position of the tooltip, relative to the invoking content

Placement
'top'
content content

Tooltip content. Overridden by the content slot

string
unknown
Methods 2
Method Name Description
show()

Show the tooltip

hide()

Hide the tooltip

Events 0
None
CSS Shadow Parts 0
None
CSS Custom Properties 27
CSS Property Description Default
--rh-tooltip-arrow-size 11px
--rh-tooltip-content-background-color #ffffff
--rh-tooltip-content-color #151515
--rh-tooltip-max-width 18.75rem
--rh-tooltip-content-padding-block-start 16px
--rh-tooltip-content-padding-inline-end 16px
--rh-tooltip-content-padding-block-end 16px
--rh-tooltip-content-padding-inline-start 16px
--rh-tooltip-content-font-size 0.875rem
--rh-tooltip-arrow-size /** deprecated: use --rh-tooltip-arrow-size */ var(--rh-tooltip__arrow--Width, 11px)
--rh-tooltip__arrow--Width

deprecated: use --rh-tooltip-arrow-size

11px
--rh-tooltip-max-width var(--rh-tooltip--MaxWidth, 18.75rem)
--rh-tooltip--MaxWidth 18.75rem
--rh-tooltip-content-padding-block-start /** deprecated: use --rh-tooltip-content-padding-block-start */ var(--rh-tooltip__content--PaddingTop, var(--rh-space-lg, 16px))
--rh-tooltip__content--PaddingTop

deprecated: use --rh-tooltip-content-padding-block-start

var(--rh-space-lg, 16px)
--rh-tooltip-content-padding-inline-end /** deprecated: use --rh-tooltip-content-padding-inline-end */ var(--rh-tooltip__content--PaddingRight, var(--rh-space-lg, 16px))
--rh-tooltip__content--PaddingRight

deprecated: use --rh-tooltip-content-padding-inline-end

var(--rh-space-lg, 16px)
--rh-tooltip-content-padding-block-end /** deprecated: use --rh-tooltip-content-padding-block-end */ var(--rh-tooltip__content--PaddingBottom, var(--rh-space-lg, 16px))
--rh-tooltip__content--PaddingBottom

deprecated: use --rh-tooltip-content-padding-block-end

var(--rh-space-lg, 16px)
--rh-tooltip-content-padding-inline-start /** deprecated: use --rh-tooltip-content-padding-inline-start */ var(--rh-tooltip__content--PaddingLeft, var(--rh-space-lg, 16px))
--rh-tooltip__content--PaddingLeft

deprecated: use --rh-tooltip-content-padding-inline-start

var(--rh-space-lg, 16px)
--rh-tooltip-content-font-size /** deprecated: use --rh-tooltip-content-font-size */ var(--rh-tooltip__content--FontSize, var(--rh-font-size-body-text-sm, 0.875rem))
--rh-tooltip__content--FontSize

deprecated: use --rh-tooltip-content-font-size

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

deprecated: use --rh-tooltip-content-color

var(--rh-color-text-primary-on-light, #151515)
--rh-tooltip-content-color var(--rh-color-text-primary-on-dark, #ffffff)
--rh-tooltip-content-background-color var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515))
--rh-tooltip__content--BackgroundColor var(--rh-color-surface-darkest, #151515)
Design Tokens 9
Token Copy
--rh-line-height-body-text
Full CSS Variable Permalink to this token
--rh-box-shadow-sm
Full CSS Variable Permalink to this token
--rh-border-radius-default
Full CSS Variable Permalink to this token
--rh-space-lg
Full CSS Variable Permalink to this token
--rh-font-size-body-text-sm
Full CSS Variable Permalink to this token
--rh-color-text-primary-on-light
Full CSS Variable Permalink to this token
--rh-color-text-primary-on-dark
Full CSS Variable Permalink to this token
--rh-color-surface-lightest
Full CSS Variable Permalink to this token
--rh-color-surface-darkest
Full CSS Variable Permalink to this token
© 2025 Red Hat Deploys by Netlify