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	boolean Disable the tooltip.
isOpen	undefined	boolean Optionally control the open state of the tooltip.
message	—	ReactNode Tooltip message.
keyboardShortcut	—	string The keyboard shortcut to display in the tooltip. Use the `+` symbol to separate characters.
placement	"top"	PlacementWithLogical The 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 | undefined Element to show tooltip around.
openSpeed	"default"	"immediate" | "default" Show the tooltip with a delay.