Tooltip
componentPages.tooltip_description
Demonstração
componentPages.tooltip_demo_badge_label
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
content | React.ReactNode | — | componentPages.tooltip_prop_content |
children | React.ReactNode | — | componentPages.tooltip_prop_children |
side | 'top' | 'right' | 'bottom' | 'left' | 'top' | componentPages.tooltip_prop_side |
align | 'start' | 'center' | 'end' | 'center' | componentPages.tooltip_prop_align |
delayDuration | number | 700 | componentPages.tooltip_prop_delayDuration |
disabled | boolean | false | componentPages.tooltip_prop_disabled |
Uso
import { Tooltip, Button } from '@ghiberti85/ui'
// Basic
<Tooltip content="Save document">
<Button variant="primary">Save</Button>
</Tooltip>
// Sides
<Tooltip content="Left side" side="left">
<Button>Left</Button>
</Tooltip>
<Tooltip content="Bottom" side="bottom">
<Button>Bottom</Button>
</Tooltip>
// Custom delay
<Tooltip content="Quick tip" delayDuration={200}>
<Button>Hover me</Button>
</Tooltip>
// Disabled — renders children without tooltip
<Tooltip content="Won't show" disabled>
<Button>No tooltip</Button>
</Tooltip>