ツールチップ（Tooltip）
ホバー・フォーカス時に補足情報を表示するUIの実装を4つのアプローチで比較。 表示位置（12方向）・遅延・カラー・矢印・複数行・Tooltip.Group・Popoverなど、実践的なオプションをインタラクティブに確認できます。
Mantine Tooltip
Mantine の Tooltip は position（12方向）・color・withArrow・multiline・openDelay/closeDelay に対応。 Tooltip.Group でグループ内のツールチップを遅延なしで高速切り替えできる。 disabled 要素には span でラップしてから適用。
position 12方向Tooltip.GroupopenDelay / closeDelaymultiline7色プリセット
読み込み中...
tsx
'use client';
import { MantineProvider, Tooltip, Button } from '@mantine/core';
import '@mantine/core/styles.css';
export function MantineTooltipDemo() {
return (
<MantineProvider>
<div className="flex gap-4">
<Tooltip label="上に表示" position="top">
<Button variant="default">Top</Button>
</Tooltip>
<Tooltip label="右に表示" position="right">
<Button variant="default">Right</Button>
</Tooltip>
<Tooltip label="下に表示" position="bottom">
<Button variant="default">Bottom</Button>
</Tooltip>
<Tooltip label="左に表示" position="left">
<Button variant="default">Left</Button>
</Tooltip>
</div>
</MantineProvider>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Mantineを使ったツールチップを実装してください。 - 使用ライブラリ: @mantine/core の Tooltip・Tooltip.Group - position prop（top / bottom / left / right および各斜め方向の12方向）で表示位置を指定できること - withArrow prop で三角形の矢印を表示すること - openDelay / closeDelay prop でホバー時の表示・非表示遅延をミリ秒単位で設定すること - Tooltip.Group でグループ内のツールチップを遅延なしで高速切り替えできること - color prop で Mantine の7色プリセットカラーを切り替えられること - multiline + w prop で複数行テキストのツールチップを実装すること
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| 項目 | Mantine | Ant Design | shadcn/ui | CSS カスタム |
|---|---|---|---|---|
| 表示位置 | ✅ 12方向（position） | ✅ 12方向（placement） | ✅ top・bottom・left・right | ⚠️ 4方向（拡張可能） |
| 矢印 | ✅ withArrow prop | ✅ arrow prop（3モード） | ✅ 自動表示 | ⚠️ border-trick で自作 |
| 表示トリガー | ✅ hover（デフォルト） | ✅ hover / click / focus | ✅ hover（デフォルト） | ⚠️ onMouseEnter/onFocus で自作 |
| 遅延制御 | ✅ openDelay / closeDelay | ✅ mouseEnterDelay / mouseLeaveDelay | ✅ delay prop（TooltipProvider） | ⚠️ setTimeout で自作 |
| グループ化 | ✅ Tooltip.Group | ❌ 標準では非対応 | ✅ TooltipProvider | ❌ 実装が複雑 |
| リッチコンテンツ | ⚠️ label に JSX 渡し可 | ✅ Popover（title + content） | ✅ childrenで自由に構成 | ✅ 自作 RichPopover |
| アクセシビリティ | ✅ WAI-ARIA準拠 | ✅ WAI-ARIA準拠 | ✅ WAI-ARIA（Radix UI） | ⚠️ 実装者次第 |
| バンドルサイズ | ⚠️ 中（全体で大） | ⚠️ 中（全体で大） | ✅ 使った分だけ | ✅ ゼロ追加 |
選択のポイント
- Mantine — Tooltip.Group によるグループ内高速切り替えが便利で、ツールバーのアイコンボタン群にツールチップを付ける用途に最適。 openDelay / closeDelay で細かいインタラクションを調整できる。Mantine を採用済みなら一択。
- Ant Design — trigger に click / focus を指定できる点と、10色プリセット + カスタムカラーの柔軟性が魅力。 Popover でタイトル＋本文のリッチなツールチップも手軽に実装でき、管理画面の説明UI に向いている。
- shadcn/ui — Radix UI ベースでアクセシビリティが完全対応。TooltipProvider で遅延をまとめて管理でき、 TooltipContent の children に任意の JSX を置けるので複雑な内容も表現しやすい。 コードが手元にあるため、スタイルの完全カスタマイズも可能。
- CSS カスタム — 依存なしで実装したい場合に最適。absolute 配置 + border-trick による矢印、 opacity transition によるアニメーションで十分な見た目を実現できる。 デザインシステムの色に完全準拠させたい場合や、軽量化を優先する場面で選ぶ価値がある。