Tooltip

The Tooltip component displays additional information when a user hovers or focuses on a trigger element.

Usage & Examples

Default

default.tsx

  <Tooltip content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

Visual variants

Themes

primary
secondary
tertiary
quaternary

States

success
warning
error
info

Variants

solid
outline
glass
glassOutline

Rounding

none
medium
large

Shadows

none
light
strong
visual-variants.tsx
// Themes

  <Tooltip theme="primary" content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

  <Tooltip theme="secondary" content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

  <Tooltip theme="tertiary" content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

  <Tooltip theme="quaternary" content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

// States

  <Tooltip state="success" content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

  <Tooltip state="warning" content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

  <Tooltip state="error" content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

  <Tooltip state="info" content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

// Variants

  <Tooltip variant="solid" content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

  <Tooltip variant="outline" content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

  <Tooltip variant="glass" content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

  <Tooltip variant="glassOutline" content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

// Rounding

  <Tooltip rounding="none" content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

  <Tooltip rounding="medium" content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

  <Tooltip rounding="large" content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

// Shadows

  <Tooltip shadow="none" content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

  <Tooltip shadow="light" content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

  <Tooltip shadow="strong" content="Tooltip message" placement="top">
    <Button>Hover me</Button>
  </Tooltip>

Props API

19 props
Columns
Tooltip props API
Default
Description
aria-labelstringNoaria—Accessible label applied to the tooltip itself. Use when the tooltip needs an explicit accessible name.
aria-labelledbystringNoaria—Accessible labelling reference for the tooltip itself.
childrenReactNodeYesprops—The element that triggers the tooltip.
classNamestringNostyling—Additional CSS class names for the tooltip wrapper.
contentstringYesprops—The content text displayed inside the tooltip.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
idstringNoprops—Optional custom id for the tooltip element. If omitted, a stable generated id is used.
keepMountedWhenHiddenbooleanNopropstrueWhether the tooltip should remain in the accessibility tree when hidden. Defaults to false behavior via aria-hidden.
placement"left" | "right" | "top" | "bottom"Noprops"top"The placement of the tooltip relative to the target element. "top" | "bottom" | "left" | "right"
roundingRoundingTypeNostylingconfigured default rounding (fallback: "medium")Rounding style of the tooltip. "none" | "small" | "medium" | "large" | "full"
shadowShadowTypeNostyling—Shadow style of the tooltip. "none" | "light" | "medium" | "strong" | "intense"
stateStateTypeNostyling—State of the tooltip for visual feedback. "success" | "error" | "warning" | "info" | "disabled" | ""