children?ReactNodecloseDelay?number150defaultOpen?booleanisOpen?booleanonChange?(isOpen: boolean) => voidopenDelay?number0placement?Placement'bottom'| Prop | Type | Default |
|---|---|---|
children? | ReactNode | - |
closeDelay? | number | 150 |
defaultOpen? | boolean | - |
isOpen? | boolean | - |
onChange? | (isOpen: boolean) => void | - |
openDelay? | number | 0 |
placement? | Placement | 'bottom' |
renderItem(props: TooltipTriggerProps) => ReactElement| Prop | Type | Default |
|---|---|---|
renderItem | (props: TooltipTriggerProps) => ReactElement | - |
children?ReactNode| Prop | Type | Default |
|---|---|---|
children? | ReactNode | - |
import { Tooltip } from '@k8ordo/ui';<Tooltip.Root placement="bottom-start">
<Tooltip.Trigger
renderItem={(props) => (
<Button type="button" {...props}>
Hover me
</Button>
)}
/>
<Tooltip.Content>
<p>Supplementary information</p>
</Tooltip.Content>
</Tooltip.Root><Tooltip.Root placement="top">
<Tooltip.Trigger
renderItem={(props) => (
<Button type="button" {...props}>Top</Button>
)}
/>
<Tooltip.Content>
<p>Top tooltip</p>
</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root placement="right">
<Tooltip.Trigger
renderItem={(props) => (
<Button type="button" {...props}>Right</Button>
)}
/>
<Tooltip.Content>
<p>Right tooltip</p>
</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root placement="bottom">
<Tooltip.Trigger
renderItem={(props) => (
<Button type="button" {...props}>Bottom</Button>
)}
/>
<Tooltip.Content>
<p>Bottom tooltip</p>
</Tooltip.Content>
</Tooltip.Root>
<Tooltip.Root placement="left">
<Tooltip.Trigger
renderItem={(props) => (
<Button type="button" {...props}>Left</Button>
)}
/>
<Tooltip.Content>
<p>Left tooltip</p>
</Tooltip.Content>
</Tooltip.Root>