1. Primitives
  2. Tooltip

<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>

Properties  

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[]
Made withby folks at