ツールチップ（Tooltip）
ホバー・フォーカス時に補足情報を表示するUIの実装を3つのアプローチで比較。 表示位置（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 | CSS カスタム |
|---|---|---|---|
| 表示位置 | ✅ 12方向（position） | ✅ 12方向（placement） | ⚠️ 4方向（拡張可能） |
| 矢印 | ✅ withArrow prop | ✅ arrow prop（3モード） | ⚠️ border-trick で自作 |
| 表示トリガー | ✅ hover（デフォルト） | ✅ hover / click / focus | ⚠️ onMouseEnter/onFocus で自作 |
| 遅延制御 | ✅ openDelay / closeDelay | ✅ mouseEnterDelay / mouseLeaveDelay | ⚠️ setTimeout で自作 |
| グループ化 | ✅ Tooltip.Group | ❌ 標準では非対応 | ❌ 実装が複雑 |
| リッチコンテンツ | ⚠️ label に JSX 渡し可 | ✅ Popover（title + content） | ✅ 自作 RichPopover |
| カラープリセット | ✅ 7色（Mantineカラー） | ✅ 10色 + カスタム16進 | ✅ 任意のCSSカラー |
| 複数行テキスト | ✅ multiline + w prop | ✅ 自動折り返し | ✅ maxWidth で制御 |
| バンドルサイズ | ⚠️ 中（全体で大） | ⚠️ 中（全体で大） | ✅ ゼロ追加 |
選択のポイント
- Mantine — Tooltip.Group によるグループ内高速切り替えが便利で、ツールバーのアイコンボタン群にツールチップを付ける用途に最適。 openDelay / closeDelay で細かいインタラクションを調整できる。Mantine を採用済みなら一択。
- Ant Design — trigger に click / focus を指定できる点と、10色プリセット + カスタムカラーの柔軟性が魅力。 Popover でタイトル＋本文のリッチなツールチップも手軽に実装でき、管理画面の説明UI に向いている。
- CSS カスタム — 依存なしで実装したい場合に最適。absolute 配置 + border-trick による矢印、 opacity transition によるアニメーションで十分な見た目を実現できる。 デザインシステムの色に完全準拠させたい場合や、軽量化を優先する場面で選ぶ価値がある。