Tooltip

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

#Usage

#Placement

Use the placement prop to change the placement of the tooltip.

#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.

#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.
• 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.
message	—	string 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.
children	—	ReactNode Element to show tooltip around.
openSpeed	"immediate"	"immediate" | "slow" Show the tooltip immediately or wait 500ms.