Tooltip

A popup that displays informative text when users hover, focus, or click an element. Supports hover, focus, click-only modes, and configurable placement.

Installation

pnpm dlx shadcn@latest add tooltip

Usage

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@hoag/ui/components/tooltip";
 
export default function Demo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button variant="outline">Hover me</Button>
        </TooltipTrigger>
        <TooltipContent>Helpful message</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Default

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">Hover me</Button>
    </TooltipTrigger>
    <TooltipContent>Helpful message</TooltipContent>
  </Tooltip>
</TooltipProvider>

Placement

<TooltipContent side="top">Top placement</TooltipContent>
<TooltipContent side="right">Right placement</TooltipContent>
<TooltipContent side="bottom">Bottom placement</TooltipContent>
<TooltipContent side="left">Left placement</TooltipContent>

Click Only

Use clickOnly to open tooltip only on click, not on hover/focus.

<Tooltip clickOnly>
  <TooltipTrigger asChild>
    <Button>Click me</Button>
  </TooltipTrigger>
  <TooltipContent>Only opens on click.</TooltipContent>
</Tooltip>

Without Arrow

<TooltipContent showArrow={false}>No arrow tooltip</TooltipContent>

API Reference

`<Tooltip>`

Prop	Type	Default	Description
`clickOnly`	`boolean`	`false`	Open only on click, disables hover/focus
`enableClickTrigger`	`boolean`	`true`	Also open on click (in addition to hover)
`open`	`boolean`	—	Controlled open state
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes
`delayDuration`	`number`	`700`	Delay in ms before tooltip opens on hover

`<TooltipContent>`

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`	Preferred side of the trigger
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment along the side
`sideOffset`	`number`	`4`	Distance in px from trigger
`showArrow`	`boolean`	`true`	Show/hide the arrow pointer

Switch Toast