Tooltipped

Component | Source Code

extends ComponentPropsWithoutRef<“div”>

Props Inheritance Hierarchy: ComponentPropsWithoutRef<“div”>

Displays a tooltip when the wrapper is hovered or receives focus. To be accessible, the guidelines outlined here were followed as closely as possible.

This is a wrapper, and you should be aware of what you’re wrapping and what the wrapper is in. See the inline prop for more information on possible tweaks you may have to make to avoid invalid markup.

Properties

The text to display for the tooltip.

disableWrapperFocus?: boolean

(Optional, defaults to false) Whether the wrapper for the tooltip can be focused. You should disable wrapper focus when the element you’re giving a tooltip to can receive focus on its own. Since the inner element can receive focus, allowing the wrapper to have focus serves no purpose, but it makes keyboard navigation more difficult.

hideDelayMs?: number

(Optional, defaults to 250) The number of milliseconds that must pass before the tooltip disappears. Note, it is recommended that you DON’T make this less than 250. The delay exists partially to allow the user time to hover over the tooltip to keep it alive. The tooltip remaining visible when the tooltip itself is hovered is a requirement according to the Mozilla accessibility guidelines for tooltips.

inline?: boolean

(Optional, defaults to false) Whether the container for the wrapper uses an inline element (span). This can be used for easy shorthand when you wrap an inline element with a tooltip, or when this wrapper appears in an element where div is not a valid child, since by default the wrapper is implemented with a div.

Note that setting this to true changes the wrapper from a div to a span. If you set this to true, ensure you’re wrapping only elements that can exist in a span.

showDelayMs?: number

(Optional, defaults to 500) The number of milliseconds that must pass before the tooltip appears.