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


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


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


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


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

For a list of supported keys see Mousetrap.


Tooltip must have a single element as a child.



  • 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 a message contains anything else than text, like links or buttons.
  • When user is expected to take an action inside a tooltip.




Disable the tooltip.


ReactElement | string | number | ReactFragment

Tooltip message.



The keyboard shortcut to display in the tooltip. Use the `+` symbol to separate characters.


The placement of the tooltip.


ReactElement | string | number | boolean | undefined

Element to show tooltip around.

openSpeed"immediate""immediate" | "slow"

Show the tooltip immediately or wait 500ms.

On this page

  • Usage
  • Placement
  • Open speed
  • Keyboard shortcut
  • Children
  • Guidelines
  • When to use
  • When not to use
  • Content
  • Props