Components

Tooltip

Design
Code

Display a brief message on hover.

The tooltip appears when a cursor is positioned over an icon or button. There's only one type, always anchored to the element by a small tail.

Web
React Native
Android
Apple
Other
information
Track each athlete's viewing activity.
<Tooltip
  position="top"
  text="Track each athlete's viewing activity."
  parent="icon"
>
  <Icon type="information" size="large" />
</Tooltip>

Props

children

node

The element contained within the tooltip.

position

oneOf
string

Where the tooltip will appear in relation to the contained element.

  • top
  • bottom
  • left
  • right

text

string

What the tooltip should say.

parent

string

If you’re placing a tooltip in an absolutely positioned container, pass the id here to correctly position the tooltip itself.

delayTime

number

The wait before a tooltip appears.

maxWidth

string

Changes the max. width of the tooltip from the default 11.25rem.

qaId

string

A unique string to control this tooltip in automated tests.