ナビゲーションと開示@neumorphism-ui/tooltip

Tooltip

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

@neumorphism-ui/tooltip

Registry JSON

プレビュー

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

インストール

npx shadcn@latest add @neumorphism-ui/tooltip

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定を完了してください。

使い方

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

Import

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

Example

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger
      render={<Button size="icon" aria-label="設定を開く" />}
    >
      ⚙
    </TooltipTrigger>
    <TooltipContent side="top">
      設定
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

API リファレンス

コンポーネント	プロパティ	型	デフォルト	説明
`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 の間隔です。

プレビュー

インストール

使い方

Import

Example

API リファレンス

アクセシビリティ