Tooltip

A popup that shows related information on hover or keyboard focus. Content inherits writing direction via useDirection so text stays correct in RTL portals.

Basic

Show a short hint on hover or focus.

Installation

CLI

npx @sonojs/ui@latest add tooltip

Setup

Wrap the app (or a large subtree) with TooltipProvider.

layout.tsx

import { TooltipProvider } from "@/components/ui/tooltip"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <TooltipProvider>{children}</TooltipProvider>
      </body>
    </html>
  )
}

Composition

structure

TooltipProvider  // mount once near the root
Tooltip
├── TooltipTrigger
└── TooltipContent

Usage

tooltip.tsx

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

export function Example() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button variant="outline">Hover</Button>
      </TooltipTrigger>
      <TooltipContent>
        <p>Add to library</p>
      </TooltipContent>
    </Tooltip>
  )
}

Direction

Use align="start" / "end" for alignment that follows writing direction. side values left / right stay physical.

direction.tsx

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

// Content gets dir from useDirection (portal-safe).
// Prefer align="start" / "end" when the tip should follow writing direction.
<Tooltip>
  <TooltipTrigger>Hover</TooltipTrigger>
  <TooltipContent side="top" align="start">Hint</TooltipContent>
</Tooltip>

Props

Prop	Type	Default	Description
side	"top" · "right" · "bottom" · "left"	"top"	On `TooltipContent` — preferred edge of the trigger.
align	"start" · "center" · "end"	"center"	On `TooltipContent` — prefer `start`/`end` with writing direction.
sideOffset	number	0	Distance in pixels from the trigger.
delayDuration	number	0	On `TooltipProvider` — open delay in ms.