The Tooltip component adds a tooltip to add context to elements on the page. The Toolip has a black background by default.

Default example

Text with a tooltip
<BorderBox p={3}>
  <Tooltip text="Hello, Tooltip!">Text with a tooltip</Tooltip>

System props

Tooltip components get COMMON system props. Read our System Props doc page for a full list of available props.

Component props

alignStringCan be either left or right.
directionStringCan be one of n, ne, e, se, s, sw, w, nw
noDelayBooleanWhen set to true, tooltip appears without any delay
textStringText used in aria-label (for accessibility).
wrapBooleanUse true to allow text within tooltip to wrap.
Edit this page on GitHub