Tooltip

A short caption on hover.

A short caption shown on hover or focus. The moment you want something interactive inside it, reach for Popover.

export const client = "only";

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
  Button,
} from "@squadbase/vantage/ui";
import { Info } from "lucide-react";

export default function Example() {
  return (
    <TooltipProvider delay={200}>
      <div className="flex items-center gap-3">
        <Tooltip>
          <TooltipTrigger render={<Button variant="outline" size="icon" aria-label="説明" />}>
            <Info />
          </TooltipTrigger>
          <TooltipContent>集計は毎時 05 分に更新されます</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger render={<Button variant="ghost" />}>解約率</TooltipTrigger>
          <TooltipContent side="right">当月に解約した顧客数 ÷ 月初の顧客数</TooltipContent>
        </Tooltip>
      </div>
    </TooltipProvider>
  );
}

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@squadbase/vantage/ui";

Parts

Part	Role
`TooltipProvider`	Shared timing. `delay` (default `0`, ms)
`Tooltip`	One tooltip’s state
`TooltipTrigger`	What triggers it; `render` makes it any element
`TooltipContent`	The bubble. `side` (default `top`) / `align` / `sideOffset`