Tooltip
The
Tooltip
component is used to display a hint when the user hovers over an element.Basic usage
tsxCopied1<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.tsxCopied1<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.tsxCopied1<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.tsxCopied1<Tooltip label="Tooltip for multiple components" wrapper="div">2<div>Div 1</div>3<div>Div 2</div>4</Tooltip>
Component API
children
REQUIRED
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
Color of the tooltip.
disabled
optional
Whether the tooltip should be disabled.
label
REQUIRED
The content in the tooltip itself.
multiline
optional
default: false
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
The tooltip position relative to the children. If not specified, the position will be determined automatically.
width
optional
wrapper
optional
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.