Tooltip

A small text label that appears on hover to provide additional context about an element, with support for multiple positions.

Preview

Usage

tsx

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from "zostel-ui";

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline" size="icon">
        <BellIcon />
      </Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Notifications</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Props

Prop	Type	Default	Description
`delayDuration`	`number`	400	Delay in milliseconds before the tooltip appears
`side`	`"top" \| "right" \| "bottom" \| "left"`	"top"	The preferred side of the trigger to render against
`sideOffset`	`number`	4	Distance in pixels from the trigger
`align`	`"start" \| "center" \| "end"`	"center"	The preferred alignment against the trigger

delayDuration

Type: number

Default: 400

Delay in milliseconds before the tooltip appears

side

Type: "top" | "right" | "bottom" | "left"

Default: "top"

The preferred side of the trigger to render against

sideOffset

Type: number

Default: 4

Distance in pixels from the trigger

align

Type: "start" | "center" | "end"

Default: "center"

The preferred alignment against the trigger

Previous Hover Card Next Toast