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.
• When user is expected to take an action inside a tooltip.

#Content

• Use sentence case.

#Props

Name	Default	Description