TooltipとPopover（Popper）の使い分け.md

TooltipとPopoverの使い分け

コンポーネントの目的

Tooltipは、ツールまたは他の相互作用が何を行うかについてのヒントを意図するものです。コンテンツを追加するのではなく、マウスオーバーしたコンテンツを明確にするか、使用を助けることを目的としています。

Popoverは、関連する追加コンテンツを提供するためのものです。

コンポーネントの大きさ

Tooltipは、要素の目的を伝えることのみを目的としているため、短くする必要があります。

一方、Popoverはより冗長になる可能性があり、ヘッダーと本文に多くのテキスト行を含めることができます。

コンポーネントのインタラクション

インタラクション

人間が何かアクション(操作や行動)をした時、そのアクションが一方通行にならず、相手側のシステムなり機器がそのアクションに対応したリアクション

通常、Tooltipはホバーでのみ表示されます。そのため、ページの他の部分と対話しながらコンテンツを読み取る必要がある場合、Tooltipは機能しません。

Popoverは通常、ページの他の部分をクリックするか、実装に応じてターゲットを2回クリックすることにより、ページの他の要素と対話できます。

さらに、ターゲットからマウスを外してもPopoverは開いたままなので、ボタンやインタラクションを追加できます。

まとめ

以下のいずれかである場合、TooltipではなくPopoverを用いるべきです。

• 表示したい内容がヒントではなく追加のコンテンツである

• インタラクションを追加したい

• 1行以上のコンテンツを追加したい

• マウスオーバーするターゲットなしでコンテンツを開いたままにする必要がある