Command Menu

Search documentation, components, and switch theme.

Atoms

Tooltip

A popup that displays information on hover or focus.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/tooltip

Install the following dependencies:

npm install radix-ui

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover me</TooltipTrigger>
    <TooltipContent>
      <p>View ledger details</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

Examples#

Side#

Icon Button#

Disabled Button#