Tooltip
Tooltip Component
Playground
Props
| Prop | Type | Default | Value |
|---|---|---|---|
content* | ReactNode | — | — |
side | 'top' | 'bottom' | 'left' | 'right' | — | |
delayDuration | number | — | |
variant | 'default' | 'inverse' | — |
Related Components
TooltipProviderTooltipRootTooltipTriggerTooltipContentTooltipPortal
Usage
<Tooltip content="This is helpful">
<Button>Hover me</Button>
</Tooltip>
// M3 inverse style for high contrast
<Tooltip content="High contrast tooltip" variant="inverse">
<Button>Hover me</Button>
</Tooltip>Variants
Style Variants
default
inverse
Disabled State
default disabled
inverse disabled