Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

tsx

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

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

Installation

CLI

bash

npx fivui add tooltip

Manual

Install the following dependencies:

bash

npm install @radix-ui/react-tooltip

Usage

tsx

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

tsx

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent>
      <p>Add to library</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Examples

Sides

Use the side prop to control tooltip placement.

Tooltip Sides

Tooltips can be positioned on different sides

With Icons

Tooltips work great with icon buttons to provide context.

Icon Tooltips

Helpful tooltips for icon-only buttons

External Documentation

This component is built on top of Radix UI Tooltip.