Code | Tooltip | Red Hat design system

Skip to main content

Home
About
Get started
Foundations
Tokens
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
- Navigation (primary)
- Navigation (secondary)
- Pagination
- Popover Planned
- Progress steps
- Site status
- Skip link
- Spinner
- Statistic
- Subnavigation
- Surface
- Switch
- Table
- Tabs
- Tag
- Tile
- Timestamp
- Tooltip
- Video embed
Patterns
Accessibility
Design/code status
Release notes
Get support

Overview Style Guidelines Code Demos Accessibility

Installation

Usage

Slot Name	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.

DOM Property	Description	Type	Default
`position`	The position of the tooltip, relative to the invoking content	`Placement`	`'top'`
`content`	Tooltip content. Overridden by the content slot	`string \| undefined`	`unknown`

Method Name	Description
`show()`	Show the tooltip
`hide()`	Hide the tooltip

None

None

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`

None

© 2021-2024 Red Hat, Inc.