<Tooltip />
Tooltips display information when hovering, focusing or tapping.
<Card padding={4} style={{textAlign: 'center'}}>
<Text>
<Tooltip
content={
<Box padding={1}>
<Text muted size={1}>
Tooltip content
</Text>
</Box>
}
fallbackPlacements={['right', 'left']}
placement="top"
portal
>
<span style={{display: 'inline-block'}}>
Hover here
</span>
</Tooltip>
</Text>
</Card>
allowedAutoPlacements?: Placement[]
animate?: boolean
Whether the
Tooltip
should animate in and out.arrow?: boolean
boundaryElement?: HTMLElement | null
children?: React.ReactElement
content?: React.ReactNode
delay?: number | Partial<{ open: number; close: number }>
An optional delay to apply to the tooltip. If a number is applied, it will be used for both opening and closing.
disabled?: boolean
fallbackPlacements?: Placement[]
placement?: Placement
portal?: boolean
Whether or not to render the tooltip in a portal element.
shadow?: number | number[]