Tooltip

The Tooltip component is used to display a hint when the user hovers over an element.

Basic usage

 
tsx
Copied
1
<Tooltip label="He just needed a little space">
2
  <Button>Did you hear about the claustrophobic astronaut?</Button>
3
</Tooltip>

Position
By default, the tooltip automatically positions itself so it is not cut off.
Manually specify the position by setting the position prop.
tsx
Copied
1
<Tooltip label="He just needed a little space" position="right">
2
  <Button>Did you hear about the claustrophobic astronaut?</Button>
3
</Tooltip>

Multiline
To enable multiline mode set the multiline prop to enable line breaks and the width prop to set tooltip width.
tsx
Copied
1
<Tooltip label="He only just needed a tad bit of space around him" multiline width={100}>
2
  <Button>Did you hear about the claustrophobic astronaut?</Button>
3
</Tooltip>

Tooltip children
Most Airplane components, strings, numbers, and React fragments should work as tooltip children.
Custom components must support the ref prop to serve as tooltip children. Multiple components are not supported out of the box. To support custom components without the ref prop or multiple children, set wrap="div". Under the hood, this will wrap the children in a div which becomes the single child of the tooltip.
tsx
Copied
1
<Tooltip label="Tooltip for multiple components" wrapper="div">
2
  <div>Div 1</div>
3
  <div>Div 2</div>
4
</Tooltip>

Component API
children
REQUIRED
React.ReactNode

The target element. Interacting with this element will launch the tooltip.

This element must be a single element that takes a ref. If you want to place a tooltip on multiple elements or an element without a ref, set wrap="div".

color
optional
default: gray.8
"primary" | "secondary" | "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "success" | "error" | `primary.${number}` | `secondary.${number}` | `dark.${number}` | `gray.${number}` | `red.${number}` | `pink.${number}` | `grape.${number}` | `violet.${number}` | `indigo.${number}` | `blue.${number}` | `cyan.${number}` | `teal.${number}` | `green.${number}` | `lime.${number}` | `yellow.${number}` | `orange.${number}` | `success.${number}` | `error.${number}`

Color of the tooltip.

disabled
optional
boolean

Whether the tooltip should be disabled.

label
REQUIRED
React.ReactNode

The content in the tooltip itself.

multiline
optional
default: false
boolean

Whether the tooltip content should be wrapped on to the next line. If true, set the width prop to determine where the content should wrap.

position
optional
"left" | "right" | "top" | "bottom" | "left-start" | "left-end" | "right-start" | "right-end" | "top-start" | "top-end" | "bottom-start" | "bottom-end"

The tooltip position relative to the children. If not specified, the position will be determined automatically.

width
optional
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.
wrapper
optional
"div" | "span"

Wraps the children in a span or div that fits the height and width of the children.

Use this property if you want to use a tooltip on multiple elements or an element without a ref.

PrivacyTermsSupport