Radix と Tailwind で、ツールチップを実装する

Radix とは

Radix は、UI コンポーネントのコレクションで、アクセシビリティやデザインの柔軟性を重視した設計が特徴です。これにより、React アプリに洗練されたインタラクションを簡単に追加することができます。特に @radix-ui/react-tooltip などのコンポーネントは、ツールチップのような UI 要素をシンプルに実装するのに役立ちます。

インストール

まずは、必要なパッケージをインストールしましょう。

実装環境

• React 18+
• Tailwind CSS 3+
• Radix UI (Tooltip)

ツールチップの実装

以下のコードでは、Radix のツールチップコンポーネントを使って「Add to library」ボタンにツールチップを追加しています。

このコードを使うことで、ボタンにマウスをホバーした際に、ユーザーに「Add to library」というツールチップが表示されるようになります。

各コンポーネントの説明

• TooltipProvider: ツールチップを全体的に管理するプロバイダーです。これを使用することで、すべてのツールチップに共通の設定を適用できます。

• Tooltip: ツールチップ全体のコンテナです。delayDuration プロパティを 0 にすることで、ホバー時に遅延なくツールチップを表示できます。

• TooltipTrigger: ツールチップを表示させる要素をラップするためのコンポーネントです。ここでは IconButton をラップしています。asChild を指定することで、ラップした子要素自体がトリガーになります。

• TooltipContent: ツールチップの中身の部分です。sideOffset でツールチップの表示位置を調整できます。ここでは Tailwind CSS を使ってスタイルをカスタマイズしており、シンプルで視認性の高いデザインにしています。

実装のポイント

• Tailwind CSS の利用: Tailwind CSS のユーティリティクラスを使うことで、コンポーネントのスタイルを簡単に調整できます。例えば、bg-blue-500 hover:bg-blue-700 のようにホバースタイルもシンプルに設定可能です。

• 三角のマーク (ツールチップの矢印): TooltipContent の中で追加している div がツールチップの下に表示される三角マークです。これにより、ツールチップがどの要素に関連しているのかを明確に示しています。

まとめ

Radix と Tailwind CSS を使うと、ツールチップのようなアクセシブルでカスタマイズ可能な UI 要素を簡単に追加することができます。特に、TooltipProvider などの Radix のコンポーネントを活用することで、使いやすく再利用可能な UI を効率的に実装できます。ぜひ、自分のプロジェクトでも Radix と Tailwind を活用して、よりリッチなユーザーインターフェースを作ってみてください。