Skip to Content
Sponsor

Tooltip

A tooltip is a brief, informative message that appears when a user interacts with an element. Tooltips are usually initiated in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture.

The Tooltip component follows the WAI-ARIA Tooltip Pattern.

Import#

Usage#

If the children of Tooltip is a string, we wrap with in a span with tabIndex set to 0, to ensure it meets the accessibility requirements.

Note 🚨: If the Tooltip is wrapped in a functional component. Ensure you forwardRef to this component.

Hover me
Editable Example

With an icon#

Editable Example

With arrow#

Editable Example

Tooltip with focusable content#

If the children of the tooltip is a focusable element, the tooltip will show when you focus or hover on the element, and will hide when you blur or move cursor out of the element.

Editable Example

Disabled Tooltip#

Editable Example

Placement#

Using the placement prop you can adjust where your tooltip will be displayed.

Editable Example

More examples#

Editable Example

Props#

NameTypeDescriptionDefault
childrenReactNodeThe react component to use as the trigger for the tooltip-
aria-labelstringThe accessible, human friendly label to use for screen readers. If passed, tooltip will show the content `label` but expose only `aria-label` to assistive technologies-
arrowPaddingnumberThe distance of the arrow to its next border (numeric) E.g. arrowPadding = borderRadius * 2-
arrowShadowColorstring-
arrowSizenumber-
closeDelaynumberDelay (in ms) before hiding the tooltip0ms
closeOnClickbooleanIf `true`, the tooltip will hide on click-
closeOnMouseDownbooleanIf `true`, the tooltip will hide while the mouse is down-
colorSchemestring-
cssInterpolation<{}>The emotion's css style object-
defaultIsOpenbooleanIf `true`, the tooltip will be initially shown-
gutternumber-
hasArrowbooleanIf `true`, the tooltip will show an arrow tip-
isDisabledboolean-
isOpenbooleanIf `true`, the tooltip will be shown (in controlled mode)-
labelReactNodeThe label of the tooltip-
modifiersModifier<string, any>[]-
offset[number, number]-
onClose(() => void)Callback to run when the tooltip hides-
onOpen(() => void)Callback to run when the tooltip shows-
openDelaynumberDelay (in ms) before showing the tooltip0ms
orientation"horizontal" | "vertical"-
placement"top" | "right" | "bottom" | "left" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"The Popper.js placement of the tooltip-
shouldWrapChildrenbooleanIf `true`, the tooltip will wrap its children in a `<span/>` with `tabIndex=0`-
sizestring-
styleConfigRecord<string, any>-
variantstring-
Edit this page