Tooltip

アイコン操作などに、ホバーやキーボードフォーカスで短い補足を示す場合に使います。

プレビュー

アイコンとフォーカスの補足

ウォッチリストのアイコンと文字ボタンにホバーまたはフォーカスし、上下に出るヒントを比べます。

ボタンに hover するか focus を移してください。

インストール

この Registry を初めて使う場合は、先に基本設定と共通スタイルの導入を完了してください。

npx shadcn@latest add @neumorphism-ui/tooltip

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

アイコンとフォーカスの補足

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/tooltip

Registry JSON

使い方

Tooltip 内に TooltipTrigger と TooltipContent を配置し、必要なら TooltipProvider を共有します。トリガー自体にも名前を付け、必須の案内は常に表示します。

"use client";

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

export default function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={<Button />}>Formatting</TooltipTrigger>
        <TooltipContent>Choose how text appears.</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

API リファレンス

Base UI Tooltip を基盤に Provider、Root、Trigger、Portal、Positioner、Popup を組み合わせます。既定の provider delay は250msで、popup は trigger 周辺の衝突を自動的に回避します。

コンポーネント	プロパティ	型	デフォルト	説明
`TooltipProvider`	`delay`	`number`	`250`	pointer hover 後に tooltip を開くまでの遅延時間（ms）です。
`Tooltip`	`open / defaultOpen`	`boolean`	`false`	制御された open 状態、または非制御時の初期 open 状態です。
`Tooltip`	`onOpenChange`	`(open: boolean) => void`	`—`	open 状態が変わったときに呼び出されます。
`TooltipTrigger`	`render`	`ReactElement \| (props, state) => ReactElement`	`—`	button または link に tooltip trigger の動作を合成します。
`TooltipContent`	`side / align`	`"top" \| "right" \| "bottom" \| "left" / "start" \| "center" \| "end"`	`"top" / "center"`	trigger を基準に popup を配置します。
`TooltipContent`	`sideOffset`	`number`	`8`	trigger と popup の間隔です。

プレビュー

アイコンとフォーカスの補足

インストール

使い方

API リファレンス

アクセシビリティ