Tooltip

Basic usage

A tooltip can be placed on most Views components to provide a hint to the user.
Loading view...

Position

By default, the tooltip automatically positions itself so it is not cut off.
Manually specify the position by setting the position prop.
Loading view...

Multiline

To enable multiline mode set the multiline prop to enable line breaks and the width prop to set tooltip width.
Loading view...

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.
Loading view...

Component API

NameDescriptionDefault
label
Component
The content in the tooltip itself.
children
Component
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
"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.
gray.8
position
"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
number | "auto"
The tooltip width in px.
multiline
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.
wrapper
"div"
Wraps the children in a 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.
disabled
boolean
Whether the tooltip should be disabled.