Popover=hintの使い方

Popover APIの新しいモードとしてhintが導入されようとしている。

デフォルトのpopover="auto"の場合、popoverで表示した要素が排他的に制御されるため、一度に複数の要素を表示できない。popover="hint"を使うことで、メニューを表示しながらツールチップを表示するという処理が実現できる。

popover=“auto”

以下のようにポップオーバーが複数ある場合は排他的に処理され、Popover2を開くと、すでに開いていたPopover1が閉じられるような挙動になる。

<div id="popover1" popover>Popover 1</div>
<button popovertarget="popover1">Popover 1を開く</button>

<div id="popover2" popover>Popover 2</div>
<button popovertarget="popover2">Popover 2を開く</button>

デモ

popover=“hint”

popover="auto"では、先述のとおり排他的に制御されてしまうため、「メニューを開きながらツールチップを表示する」という処理ができなかった。

poover="hint"を使うことで、popover="auto"とpopover="hint"の要素を同時に表示することができる。ただし、popover="hint"の要素が複数ある場合は、その中で排他的に制御される。

<div id="popover" popover>Popover</div>
<button popovertarget="popover">Popoverを開く</button>

<div id="hint1" popover>Hint 1</div>
<button popovertarget="hint1">Hint 1を開く</button>

<div id="hint2" popover>Hint 2</div>
<button popovertarget="hint2">Hint 2を開く</button>

デモ

※キーボード操作でボタンを押すと、autoとhintを同時に表示できる