Tooltip
The
Tooltip component is used to display a hint when the user hovers over an element.Basic usage
Position
By default, the tooltip automatically positions itself so it is not cut off.
Manually specify the position by setting the
position prop.Multiline
To enable multiline mode set the
multiline prop to enable line breaks and the width prop to set
tooltip width.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.Component API
| Name | Description | Default |
|---|---|---|
| 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. | false |
| wrapper | "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. | |
| disabled | boolean Whether the tooltip should be disabled. |