Tooltip

Contextual help or information about specific components that appears on hover.

#Usage

Alternatively, you can provide a ReactNode or ReactFragment as the message:

#Placement

Use the placement prop to change the placement of the tooltip. When setting the placement to auto, or some variantion with auto, the preferredPlacement may be used to specify what the preffered automatic placement is.

#Open speed

Use the openSpeed prop to change the delay before showing the tooltip.

#Keyboard shortcut

Use the keyboardShortcut prop to display a keyboard shortcut in the tooltip.

For a list of supported keys see Mousetrap.

#Children

Tooltip must have a single element as a child.

#Controlled open state

Use the isOpen prop to control the open state of the tooltip.

#Guidelines

#When to use

• Show the same data in a different format, such as date or timestamps.
• Display a full string of text that is shortened with an ellipsis (…).
• Explain why a button is disabled.
• Provide context for icon buttons.

#When not to use

• When a message contains anything else than text, like links or buttons — use a popover instead.
• When user is expected to take an action inside a tooltip.

#Content

• Use sentence case.

#Props

Name	Default	Description
isDisabled	false	booleanDisable the tooltip.
keepMountedWhileDisabled	false	booleanKeep the tooltip machinery mounted while disabled, so toggling isDisabled never remounts the child (which would drop its focus).
isOpen	undefined	booleanOptionally control the open state of the tooltip.
message	—	ReactNodeTooltip message.
keyboardShortcut	—	stringThe keyboard shortcut to display in the tooltip. Use the + symbol to separate characters.
placement	"top"	PlacementWithLogicalThe placement of the tooltip.
preferredPlacements	—	PlacementWithLogical[]Preferred placements for the tooltip. If provided, the tooltip will try to use these placements first. This is useful when you want to restrict the tooltip to specific placements while still allowing it to flip to other placements if there's not enough space.
children	—	ReactElement<RefAttributes<HTMLElement>> | string | number | boolean | undefinedElement to show tooltip around.
openSpeed	"default"	"immediate" | "default"Show the tooltip with a delay.