Tooltip

要素にホバーすると表示される補足情報のポップアップ。

Installation

npx shadcn@latest add https://kasumi-ui.vercel.app/r/tooltip.json

Usage

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

<TooltipProvider>
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">ホバーしてみて</Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>補足テキスト</p>
  </TooltipContent>
</Tooltip>
</TooltipProvider>

Side

side prop でツールチップの表示位置を指定できます。

<TooltipProvider>
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Top</Button>
  </TooltipTrigger>
  <TooltipContent side="top">
    <p>上に表示</p>
  </TooltipContent>
</Tooltip>
</TooltipProvider>

<TooltipProvider>
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Right</Button>
  </TooltipTrigger>
  <TooltipContent side="right">
    <p>右に表示</p>
  </TooltipContent>
</Tooltip>
</TooltipProvider>

<TooltipProvider>
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Bottom</Button>
  </TooltipTrigger>
  <TooltipContent side="bottom">
    <p>下に表示</p>
  </TooltipContent>
</Tooltip>
</TooltipProvider>

<TooltipProvider>
<Tooltip>
  <TooltipTrigger asChild>
    <Button variant="outline">Left</Button>
  </TooltipTrigger>
  <TooltipContent side="left">
    <p>左に表示</p>
  </TooltipContent>
</Tooltip>
</TooltipProvider>

Props

TooltipProvider

Prop	Type	Default	Description
delayDuration	number	200	ホバーしてから表示されるまでの遅延（ms）

TooltipContent

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left"	"top"	ツールチップの表示位置
sideOffset	number	4	トリガーからの表示位置のオフセット（px）