Tooltip

ホバーで出る短い説明。

ホバーやフォーカスで出る短い説明です。中に操作を置きたくなったら 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";

パーツ

パーツ	役割
`TooltipProvider`	遅延の共有設定。`delay`（既定 `0`、ミリ秒）
`Tooltip`	1 つ分の状態
`TooltipTrigger`	きっかけ。`render` で任意の要素にする
`TooltipContent`	中身。`side`（既定 `top`）/ `align` / `sideOffset`