Zenn
🤔

完全に理解した、TooltipとPopoverの違い

2023/12/20に公開
tooltip
UI コンポーネント
popover
tech

この記事は Magic Moment Advent Calendar 2023 20 日目の記事です。

こんにちは。Magic Momentでフロントエンドエンジニアをしている根岸と申します！

本記事では、今まで自身の中で何となく分かったつもりだった 2 つの UI コンポーネント、TooltipとPopoverの違いについて改めて調べてみたので、MUIなどの UI ライブラリを参照しつつまとめていきます。

なぜ両者の違いを調べようと思ったのか？

その前に、なぜTooltipとPopoverの違いを知りたいと思ったのかについて、軽く触れてみたいと思います。
先に言ってしまうと、それぞれの違いに対する理解に対して別の視点もあるかもしれない、と気づいたためです。

それまでの理解

完全に理解する前の私は、まずそれぞれの共通点は「他の要素の上に重なって表示される」もの、と考えていましたし、この共通点に対する理解は今もさほど変わっていません。
以下の画像は MUI のBasic Popoverのコードを少し編集した後にPopoverを表示させたものです。TooltipとPopoverは「他の要素の上に重なり、追加コンテンツを表示する」という点ではほぼ変わらないでしょう。

mui-popover.png
OPEN ボタンクリックで、追加コンテンツが他の要素の上に表示される

一方でそれぞれの違いは

  • Tooltipはユーザーが要素にマウスオーバーすると表示される(マウスなどのポインティングデバイスが必要)
  • Popoverはユーザーが要素をクリックすると表示される

と理解していました。
つまりどのようなインタラクションで表示させたいかによって、Tooltipを使うべきかPopoverを使うべきかを判断する、という考え方です。

別の視点があることに気づく

そんな折、ある記述を MUI のPopoverのページに見つけてしまいました。
その記述があったのはMouse over interactionという chapter です。
上にも書いたように、私は「Popoverはユーザーが要素をクリックすると表示される」と理解していました。しかしこの「マウスオーバーでPopoverを表示させる方法」を紹介する chapter はまさに「別の視点もあるぞ！」と訴えかけてくるものであり、私のそれまでの理解に一石が投じられた瞬間となりました。

そして調べようと思い立つ

「他の要素の上に重なり、追加コンテンツを表示する」という見た目の部分は大きく変わらず、どのようにページに現れるかというトリガーの部分も重複する点があることもこの時点では分かっています。では何がTooltipとPopoverを使い分ける基準となるのでしょうか？
そこで私は、両者の「目的」にはどのような違いがあるのか、について調べてみようと思い立ちました。

それぞれの目的

先に結論から書いてしまうと、それぞれの目的について現時点では以下のように理解しています。

  • Tooltipはユーザーのタスク完了のために必ずしも必要ではない、簡単で補助的なテキストコンテンツを表示させる
  • Popoverはユーザーのタスク完了に必要なことが多い、何らかのアクションにつながるコンテンツを表示させる

参照先(主には UI コンポーネントライブラリ)でどのように紹介されているかを中心に、調べていく中で発見した定義について以下に記載していきます。

Tooltip

Tooltips display informative text when users hover over, focus on, or tap an element.

参考になるテキストを表示する、と書いてありますね。あくまで「テキスト」を表示するためのコンポーネントである、という意図が読み取れます。

Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when merchants hover, focus, tap, or click.

briefly explain とあるように、こちらは「簡単な説明」をコンテンツとして含める、という意図が読み取れます。

Definition: A tooltip is a brief, informative message that appears when a user interacts with an element in a graphical user interface (GUI).(以下略)...

上の 2 つと重なる部分もありますが、簡単で参考になるメッセージであることが記載されています。
(補足ですが、こちらの Guidelines ではTooltipに対するDoとDon'tもとても詳細に書かれており、大変参考になりました。Founder であるDon Norman 氏とJakob Nielsen 氏は UX 関連の名著が多いです)

以上の定義から、Tooltipは「簡単で参考になるテキストやメッセージをコンテンツとして表示させることを意図したコンポーネントである」と理解しました。

Popover

A Popover can be used to display some content on top of another.

複数コンテンツを表示できることが示唆されています。MUI はTooltipを「参考になるテキストを表示する」とコンテンツをテキストに限定していましたが、それとは対照的ですね。

Popovers are small overlays that open on demand. They let merchants access additional content and actions without cluttering the page.

追加コンテンツや何らかのアクションもできる、と記載されています。こちらも Polaris のTooltipはコンテンツを「機能の簡単な説明」としていましたが、Popoverではコンテンツの対象がインタラクティブに拡がっています。

以上の定義から、Popoverは「何らかの(主には表示のトリガーとなる要素に関連する)アクション含め、テキストに限らないコンテンツを表示させることを意図したコンポーネントである」と理解しました。

あくまでも自身の理解という意識を大切に！

調査にいたった段階でも、また調査してみる中でも、コンポーネント上にどのようなコンテンツを表示させたいか？という目的によってTooltipとPopoverを使い分けるという考え方は、自身の中では腑に落ちやすいと思っています。TooltipとPopoverについては、しばらくはこれを元に使い方を考えるでしょう。

とはいえ、今回の調査ではあくまで現段階での自身の理解が更新されたに過ぎず、今後また理解を検めるべきケースに出会うこともあるかもしれません。
現に調査の中で、「本当にこの目的別の理解であっているのか？」と自問すべきケースもありました。

例えば、Apple の Human Interface Guidelines ではそもそもPopovers(Popoverではなく複数形)の解説のみで、Tooltipの説明はありません。
Popovers の説明も、目的としてはTooltipの自身の理解と非常に近いものでした。

ネバダ大学のWeb Style Guideでは、Tooltips はホバーすると表示されるものであり、Popovers はクリックすると表示されるものである、と表示のトリガーごとに使い分けているようです。

自身で理解する(仮説を持つと言い換えられるかもしれません)ことはもちろん大切ですが、チームで開発する場合などは、チーム全体としての理解を統一することの方が重要でしょう。

Magic Moment ではフロントエンドアーキテクチャ会にて、このようなフロントエンドに関してディスカッションできる場が用意されており、各メンバーの考えから得られることばかりです。
フロントエンドアーキテクチャ会についてはこちらで紹介されています。↓

明日のアドベントカレンダーは 木村 (@ryurock)さんの「Engineering Manager として大事にしている 7 つの事」です。

Discussion