Red Hat design system

Importing

Usage

rh-tooltip

Importing

Usage

rh-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.

A tooltip is a floating text area that provides helpful or contextual information on hover, focus, or tap.

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.

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`

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

None

CSS Property	Description	Default
`--rh-tooltip-arrow-size`		`var(--rh-tooltip__arrow--Width, 11px)`
`--rh-tooltip-max-width`		`var(--rh-tooltip--MaxWidth, 18.75rem)`
`--rh-tooltip-content-padding-block-start`		`var(--rh-tooltip__content--PaddingTop, var(--rh-space-lg, 16px))`
`--rh-tooltip-content-padding-block-end`		`var(--rh-tooltip__content--PaddingBottom, var(--rh-space-lg, 16px))`
`--rh-tooltip-content-padding-inline-start`		`var(--rh-tooltip__content--PaddingLeft, var(--rh-space-lg, 16px))`
`--rh-tooltip-content-padding-inline-end`		`var(--rh-tooltip__content--PaddingRight, var(--rh-space-lg, 16px))`
`--rh-tooltip-content-font-size`	Font size	`var(--rh-tooltip__content--FontSize, var(--rh-font-size-body-text-sm, 0.875rem))`
`--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))`

CSS Property	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

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

Edit this page on GitHub