Tooltip

Displays informational text on hover or focus. Wraps bits-ui Tooltip.

Example

Props

Tooltip.Root

Prop	Type	Default	Description
`openDelay`	`number`	`200`	Delay in ms before tooltip opens
`closeDelay`	`number`	`0`	Delay in ms before tooltip closes
`children`	`Snippet`	—	Trigger and content

Tooltip.Trigger

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Element that triggers the tooltip

Tooltip.Content

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'top'`	Preferred side of the trigger
`sideOffset`	`number`	`4`	Distance from trigger in px
`class`	`string`	—	Additional CSS classes
`children`	`Snippet`	—	Tooltip content

Usage

<script>
  import { Tooltip, Button } from '@chrissnell/chonky-ui';
</script>

<Tooltip.Root>
  <Tooltip.Trigger>
    <Button>Hover me</Button>
  </Tooltip.Trigger>
  <Tooltip.Content side="top">
    Helpful information
  </Tooltip.Content>
</Tooltip.Root>