Tooltip

A small informational popup that appears on hover or focus.

Import


import { Tooltip } from '@grannyshot/ui'

Wrap any element to show a tooltip on hover:


<Tooltip content="Save your changes">
  <Button>Save</Button>
</Tooltip>

Control how long the user must hover before the tooltip appears (default: 300ms):


<Tooltip content="Instant tooltip" openDelay={0}>
  <Button>Hover me</Button>
</Tooltip>

Control how long the tooltip stays visible after the cursor leaves (default: 0ms):


<Tooltip content="Lingers a bit" closeDelay={500}>
  <Button>Hover me</Button>
</Tooltip>

Tooltips are especially useful for icon-only buttons:


<Tooltip content="Delete item">
  <IconButton aria-label="Delete">
    <TrashIcon />
  </IconButton>
</Tooltip>

Prop	Type	Default	Description
`content`	`ReactNode`	—	Tooltip content
`openDelay`	`number`	`300`	Delay in ms before showing
`closeDelay`	`number`	`0`	Delay in ms before hiding
`children`	`ReactNode`	—	Trigger element