Tooltip コンポーネントは存在すべきではない

Jan 07, 2026

これは、Dominik Dorfmeister 氏のブログ記事であるTooltip Components Should Not Existを日本語訳してみたものです。

誤訳などあればIssueや PR を頂けると幸いです。

認めざるを得ません：ウェブアプリケーションにおける不適切なツールチップは私が苛立つものの1つです。たしかにツールチップはつい誤用しがちです。考慮するべき以下のような懸念事項は多々あります：

アクセシビリティー
キーボードとの対話性
すべてのユーザーにとって最小の驚きであること
ツールチップの背後に重要な情報を隠さないこと

何年にもわたり、多くのデザインシステムが<Tooltip>コンポーネントを実装しようとするのを見てきましたが、個人的な意見として、それらに共通しているのは、意図した通りに使用されないということです。 API設計の視点から見ると、<Tooltip>コンポーネントは抽象化するには低レベル過ぎるもので、今日のホットテイクに繋がります🌶。

Tooltipコンポーネントは存在すべきではない

ツールチップ自体が存在するべきではないと言いたいわけではありません。”正しく”適用されるならばツールチップは有用です - あなたのユースケースにおいて正しさが何を意味するかはさておき。たしかに、学習すればそこまで到達できるかもしれませんが、正直なところ、ドキュメントを読む人は限られていて、AIは既知のものを再生産するだけなので、コードベースにアンチパターンを広める可能性が高いです。

では、代替案を示す前に、ツールチップを誤用した場合に起こり得る問題について掘り下げてみましょう。

キーボードとの対話性

明白なはずですが、私たちはアプリケーションをすべての人々のために作るべきであり、すべてのユーザーがマウスを使うわけではないことを意識する必要があります。それでも、ツールチップをトリガーする要素がインタラクティブではない場合に、ホバーした時にしか表示されないツールチップをよく見かけます。

最も人気のあるコンポーネントライブラリーであるMaterial UIを例に見てみましょう。ドキュメントにある基本的なツールチップの例は以下のようになっています：

<Tooltip title="Delete">
  <IconButton>
    <DeleteIcon />
  </IconButton>
</Tooltip>

簡単だし動作しますが、Iconを囲うだけのTooltipコンポーネントを追加したり、Badgeコンポーネントのような非インタラクティブな要素にツールチップを追加したりするとどうでしょう。

<Tooltip title="Home">
  <IconHome />
</Tooltip>

<Tooltip title="Unread Mails">
  <Badge badgeContent={4} color="primary">
    <IconMail color="action" />
  </Badge>
</Tooltip>

そうです - これらのツールチップはホバーしたときにしか表示されず、タブ操作でスキップしてしまうのでフォーカスして表示することはありません。要素がキーボードと対話的ではないので、フォーカスを受け付けることがありません。

型安全にする方法もないので、<Tooltip>コンポーネントに渡される子要素の種類を制限できません。 React Ariaはより良いアプローチで、対話的ではない要素にはツールチップを表示せず、主にマウスを使う開発者がより気づきやすくしています。修正方法は、<Focusable>コンポーネントとともにカスタムのトリガーで囲うことです。これは他のアプローチよりも優れていますが、他の問題が残っています。

すべてのユーザーにとって最小の驚き

Tooltipコンポーネントがあらゆる要素に適用できる場合、誰かがそのうち適用するでしょう。文章の途中の単語のような最も奇妙な場所にツールチップが表示されるのを見たことがあります - その背後に追加情報があることを示されるわけでもなく。

しかし、その反対も目にしたことがあります。理解するのが難しいアイコンだけのボタンがあるけど、そのボタンをクリックしても何が起きるか情報を得られないときは、とても苛立ちを感じます。

多くの開発者とデザイナーが関わるアプリケーションでは、こうした不整合が発生するのは基本的に避けられません。

では、Tooltipコンポーネント単体が理想的でないなら、デザインシステムとしてツールチップの振る舞いを公開するには他にどのようなアプローチがあるでしょう？私の考えは以下の通りです：

一貫性を保ち、アクセシビリティーに配慮したツールチップの使い方を強制するため、より高レベルなパターンコンポーネントのみ提供する

過去に効果的だったいくつかのことは以下の通りです：

<Button>や<Link>のようなインタラクティブなコンポーネントに任意のtitlepropを持たせる。これにより望む場合に追加の情報を表示できます。インタラクティブな要素はキーボード操作のタブ移動で見つけられるのでUIから見つけやすいのが通常です。
<IconButton>はtitlepropを必須としておく。アイコンに説明をつけることが強制され、アクセシビリティーのためにButtonへラベルを提供する適切な方法を示すことにもなります。
<InfoIcon>コンポーネントを追加で公開して、情報や疑問符のアイコンとツールチップをレンダリングします。この方法により、ユーザーは追加情報がどこにあるかを知ることができ、内部的にフォーカス可能であることを保証できます。
<InfoText>を作り、テキストにより多くのコンテキストを与えられるようにします。このコンポーネントは他のテキストと視覚的に区別されるべきで、例えば点線の下線を引くなどし、もちろんキーボードでも対話可能であるべきです。

他に見落としていることもあるでしょうが、もしそうだとしても、他のパターンコンポーネントを追加する方が低レベルな<Tooltip>コンポーネントを誰でもアクセス可能とするよりも良いでしょう。誤解しないで欲しいですが、柔軟性は多くの場合素晴らしいものの、一貫したUXと包括的であることがツールチップにおいては重要で、制限的な方が良いのはこのためです。

また、制限は創造性を醸成し、画面上のスペースが足りないからといってツールチップに情報を含めることができないなら、根本からいくつかアイディアを再考するきっかけなのかもしれません。

あなたの組織においてデザインシステムを作っているならば、Tooltipコンポーネントを公開インターフェースに加えないことを検討してみてはいかがでしょう。