Tooltip

User-triggered messages that provide additional information about something on a page. Tooltips are accessed by hovering with a mouse or tapping on a touch screen.

<Tooltip placement="bottom" tooltip="I am a Tooltip!">
  <Button>Hover me</Button>
</Tooltip>

Use when

  • There is additional information that could be helpful to a user

Don't use when

  • The information contained is vital to completing a task

Variations

With a maximum width

<Tooltip
  placement="bottom"
  tooltip="I am a Tooltip! I have very long text, but I have a smaller width"
  maxWidth="128px"
>
  <Button>Hover me</Button>
</Tooltip>

With custom placement

<Tooltip
  placement="top"
  tooltip="I'm above instead of below! See the props table below for all placement options.">
    <Button>Hover me</Button>
</Tooltip>

With custom delay

<Tooltip
  placement="bottom"
  tooltip="I'm slow to appear and disappear"
  showDelay="1000"
  hideDelay="1000"
>
  <Button>Hover me</Button>
</Tooltip>

With non-text content

<Tooltip tooltip={<Button href="/">Button inception</Button>}>
  <Button>Hover me</Button>
</Tooltip>

Usage Guidelines

  • The Tooltip component is only supported for Buttons and Links
  • Only add a Tooltip to other elements that are focusable
  • Props

    NameTypeDefaultDescription

    tooltip

    node

    Required

    The content to display inside of the tooltip.

    children

    element

    Required

    Single child of tooltip must be able to accept a ref.

    maxWidth

    string

    24em

    Width of the tooltip.

    placement

    string

    bottom

    The position of the tooltip relative to its trigger. Accepts top, top-start, top-end, bottom, bottom-end, left, left-start, left-end, right, right-start and right-end.

    showDelay

    number|string

    100

    Time in seconds before the tooltip appears.

    hideDelay

    number|string

    350

    Time in seconds before the tooltip disappears.

    className

    String

    undefined

    className passed to the tooltip container element.

    defaultOpen

    boolean

    false

    when set to true the tooltip will be open by default