120k
New

Tooltip

PreviousNext

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

Installation

pnpm dlx shadcn@latest add @force-ui-ember/tooltip

Usage

import { Button } from '@/ui/button';
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@/ui/tooltip';
<Tooltip>
  <TooltipTrigger>
    <Button @variant="outline">Hover</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>Add to library</p>
  </TooltipContent>
</Tooltip>

Composition

Use the following composition to build a Tooltip:

Tooltip
├── TooltipTrigger
└── TooltipContent

Examples

Side

Use the side prop to change the position of the tooltip.

With Keyboard Shortcut

Disabled Button

Show a tooltip on a disabled button by wrapping it with a span.

RTL

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference

See the Radix Tooltip documentation.