Tooltip Preview

A tooltip provides supplemental, contextual information elevated near its target component.

Tooltips should be used to provide helpful but non-essential, plaintext information. Don't use them to communicate system feedback. If you need to deliver robust, formatted information, use a popover instead.

Loading...
Open in CodeSandbox
Tooltip storybook
React guidance
Tooltip pattern
WAI guidance

Properties

appearance

The tooltip’s visual appearance.

  • normal: Uses the theme’s background and text colors.
  • inverted: Higher contrast variant that uses the theme’s inverted colors.
“inverted” “normal”
Default:
“normal”

content*

The text or JSX content of the tooltip.

WithSlotShorthandValue<{ as?: "div" | undefined; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }>
Default:
none

hideDelay

Delay before the tooltip is hidden, in milliseconds.

number
Default:
250

mountNode

Where the portal children are mounted on DOM

HTMLElement | { element?: HTMLElement | null; className?: string; } | null | undefined
Default:
a new element on document.body without any styling

onVisibleChange

Notification when the visibility of the tooltip is changing

((event: PointerEvent<HTMLElement> | FocusEvent<HTMLElement, Element>, data: OnVisibleChangeData) => void)
Default:
none

positioning

Configure the positioning of the tooltip

PositioningShorthand
Default:
above

relationship*

(Required) Specifies whether this tooltip is acting as the description or label of its trigger element.

  • label: The tooltip sets the trigger’s aria-label or aria-labelledby attribute. This is useful for buttons displaying only an icon, for example.
  • description: The tooltip sets the trigger’s aria-description or aria-describedby attribute.
  • inaccessible: No aria attributes are set on the trigger. This makes the tooltip’s content inaccessible to screen readers, and should only be used if the tooltip’s text is available by some other means.
“label” “description” “inaccessible”
Default:
none

showDelay

Delay before the tooltip is shown, in milliseconds.

number
Default:
250

visible

Control the tooltip’s visibility programatically.

This can be used in conjunction with onVisibleChange to modify the tooltip’s show and hide behavior.

If not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the trigger (child) element.

boolean
Default:
false

withArrow

Render an arrow pointing to the target element

boolean
Default:
false