Tooltip - Stera UI

Installation

pnpm dlx stera-ui add tooltip

Usage

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>Tooltip text</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Sides

Side	Description
`top`	Above the trigger (default)
`right`	Right of the trigger
`bottom`	Below the trigger
`left`	Left of the trigger

With Kbd

Combine with Kbd to show keyboard shortcuts inside tooltips.

API Reference

TooltipProvider

Prop	Type	Default
`delayDuration`	`number`	`700`

TooltipContent

Prop	Type	Default
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`
`align`	`"start" \| "center" \| "end"`	`"center"`
`sideOffset`	`number`	`4`
`alignOffset`	`number`	`0`

TooltipTrigger

Prop	Type	Default
`asChild`	`boolean`	`false`