Tooltip

Stablev0.3.0

ホバー時に追加情報を表示する小さなポップオーバー。ボタンやアイコンの説明に使用します。

基本的な使い方

ホバーでツールチップを表示

tsx

class="token keyword">import { Tooltip } class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">Tooltip content=class="token keyword">class="token string">"これはツールチップです">
  <class="token tag">Button>ホバーしてください</class="token tag">Button>
</class="token tag">Tooltip>

表示位置

4方向に表示可能

tsx

<class="token tag">Tooltip content=class="token keyword">class="token string">"上に表示" position=class="token keyword">class="token string">"top">...</class="token tag">Tooltip>
<class="token tag">Tooltip content=class="token keyword">class="token string">"下に表示" position=class="token keyword">class="token string">"bottom">...</class="token tag">Tooltip>
<class="token tag">Tooltip content=class="token keyword">class="token string">"左に表示" position=class="token keyword">class="token string">"left">...</class="token tag">Tooltip>
<class="token tag">Tooltip content=class="token keyword">class="token string">"右に表示" position=class="token keyword">class="token string">"right">...</class="token tag">Tooltip>

アイコンボタンに使用

アイコンのみのボタンに説明を追加

遅延設定

表示までの遅延時間をカスタマイズ

即時（0ms）

デフォルト（200ms）

長め（500ms）

使用例

実際の使用シーン

アクションバー:

ストレージ使用量

Props API

Prop	Type	Default	Description
`content`required	`string`	-	ツールチップに表示するテキスト
`position`	`"top" \| "bottom" \| "left" \| "right"`	`"top"`	表示位置
`delay`	`number`	`200`	表示までの遅延（ミリ秒）

Accessibility

role='tooltip' を使用
aria-describedby でトリガーとツールチップを関連付け
Escapeキーでツールチップを閉じることが可能
フォーカスでもツールチップが表示される