Tooltip

A small informational popup that appears on hover or focus.

Import


import { Tooltip } from '@grannyshot/ui'

Basic Usage

Wrap any element to show a tooltip on hover:


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

Open Delay

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


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

Close Delay

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>

Placement

Control where the tooltip appears relative to the trigger:


<Tooltip content="Top" positioning={{ placement: 'top' }}>
  <Button>Top</Button>
</Tooltip>
 
<Tooltip content="Right side" positioning={{ placement: 'right' }}>
  <Button>Right</Button>
</Tooltip>
 
<Tooltip content="Bottom start" positioning={{ placement: 'bottom-start' }}>
  <Button>Bottom Start</Button>
</Tooltip>

Available placements: top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end

With Icons

Tooltips are especially useful for icon-only buttons:


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

Props

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
`positioning`	`{ placement: Placement }`	`{ placement: 'bottom' }`	Position relative to trigger