ユーザーにヒントを表示するための `popover=hint` 属性
ポップオーバー API は 2024 年の Baseline に組み込まれており、主要なブラウザでサポートされています。Chrome Beta 133 では 3 番目の値として `hint` が追加されました。`popover=hint` はユーザーに対してヒントを表示する「ツールチップ」として動作します。この記事では `popover=hint` 属性について詳しく見ていきます。
popover=hint 属性は 2024 年 1 月現在 Chrome Beta 133 でのみサポートされています。
ポップオーバー API は 2024 年の Baseline に組み込まれており、主要なブラウザでサポートされています。
popover 属性を使用すると HTML のみを使用してアクセシブルなポップオーバーを作成できます。ポップオーバーの作成は非常に簡単です。
- ポップオーバーを表示する要素に
popover属性を追加する - ポップオーバーをトリガーする要素に
popovertarget属性を追加する popovertargetの属性の値にはpopover属性を持つ要素のidを指定する
<button popovertarget="my-popover">Show popover</button>
<div id="my-popover" popover>
<p>This is a popover</p>
</div>また、ポップオーバーをより細かく制御するために popover 属性に値を設定することもできます。現在は auto と manual の 2 つの値がサポートされています。
Chrome Beta 133 では 3 番目の値として hint が追加されました。popover=hint はユーザーに対してヒントを表示する「ツールチップ」として動作します。この記事では popover=hint 属性について詳しく見ていきます。
popover=hint 属性の特徴
popover=hint 属性の違いは他のポップオーバーが表示されたときに自動的に閉じられるかどうかです。popover=auto 属性を使用した場合、他のポップオーバーが表示されたときに自動的に閉じられます。これは <select> 要素のようなピッカーが開いた場合も同様です。
一方 popover=hint 属性を使用した場合には、すでに表示されている他のポップオーバーが表示されたとしても自動的に閉じられることはありません。ヒントとして表示されるコンテンツは他のコンテンツに対して「二次的」な情報を提供するためです。ヒントコンテンツを閲覧しながら他のコンテンツを操作することが想定されています。
唯一の例外は他のヒントが表示された場合です。1 度に複数のヒントが表示されているとユーザーの混乱を招くため、他のヒントが表示された場合には自動的に閉じられます。
ポップオーバーが開いたときにすでに開いているポップオーバーを強制的に閉じない挙動は popover=manual 属性を指定した場合と同じです。popover=hint は他の hint が表示された場合は例外として自動的に閉じられますが、popover=manual はいかなる場合でも自動的に閉じられません。
popover=manual と popover=hint のより大きな違いとして「簡単な解除（Light dismiss）」可能かどうかがあります。簡単な解除とは以下のような操作をした場合にポップオーバーが閉じることを指します。
- ポップオーバーの外側をクリック
- ESC キーを押す
popover=hint は簡単な解除が可能である一方、popover=manual は簡単な解除ができません。3 つの属性の違いを表でまとめると以下のようになります。
popover=auto |
popover=manual |
popover=hint |
|
|---|---|---|---|
| 強制非表示 | ◯ | ✗ | 他の hint が表示された場合のみ |
| 簡単な解除 | ◯ | ✗ | ◯ |
ポップオーバーのネスト
複数のポップオーバーが同時に表示されることはないルールには例外があります。ポップオーバーがネストされている場合です。
<button popovertarget="popover1">Show Parent</button>
<div id="popover1" popover>
<p>This is Parent</p>
<button popovertarget="popover2">Show Child</button>
<div id="popover2" popover>
<p>This is Child</p>
</div>
</div>子のポップオーバーは親のポップオーバーの子孫要素として存在しているため、子のポップオーバーが表示されている間に親のポップオーバーを閉じることはありません。
ポップオーバーのネストは popover=hint 属性を使用した場合少々複雑になります。ポップオーバーのスタックは auto stack と hint stack の 2 つに分類されることになります。popover=auto 属性の場合従来と同じように常に auto stack に追加されます。popover=hint の場合親要素によってどのスタックに追加されるかが決まります。親要素が popover=hint の場合は hint stack に、popover=auto の場合は auto stack に追加されます。
popover=auto は決して popover=hint の子要素として追加されることはありません。
具体例を見てみましょう。以下のように popover=auto の子要素に popover=hint の子要素がある場合、子要素が表示されている間に親要素を閉じることはありません。
<button popovertarget="popover1">Show Parent</button>
<div id="popover1" popover>
<p>This is Parent</p>
<button popovertarget="popover2">Show Child</button>
<div id="popover2" popover="hint">
<p>This is Child</p>
</div>
</div>反対に popover=hint の子要素に popover=auto の子要素がある場合、子要素が表示すると親要素が閉じられます（すべてのポップアップが非表示になります）。
<button popovertarget="popover1">Show Parent</button>
<div id="popover1" popover="hint">
<p>This is Parent</p>
<button popovertarget="popover2">Show Child</button>
<div id="popover2" popover>
<p>This is Child</p>
</div>
</div>popover=hint の子要素に popover=hint の子要素がある場合、親要素が閉じられることはありません。
<button popovertarget="popover1">Show Parent</button>
<div id="popover1" popover="hint">
<p>This is Parent</p>
<button popovertarget="popover2">Show Child</button>
<div id="popover2" popover="hint">
<p>This is Child</p>
</div>
</div>ポップオーバーをトリガーさせる方法について
ユーザーにヒントを提供するツールチップのような UI はユーザーが要素をホバーしたときに表示されることが一般的です。ですが popover=hint の仕様において、どのような方法で表示させるかは範囲の対象外とされています。
ポップオーバーがどのような方法で表示させるかについては Interest Invokers という提案で議論されています。これは interesttarget 属性を使用することによりポップオーバーを表示させる方法を提供します。
<button interesttarget="my-tooltip">Hover/Focus to show the tooltip</button>
<span popover="hint" id="my-toolip">This is the tooltip</span>現時点で使える方法としては JavaScript を使用してポップオーバーを表示させる方法があります。popover.showPopover() メソッドを使用することでポップオーバーの表示を切り替えることができます。
<label for="name">名前：</label>
<input id="name" type="text" popovertarget="my-popover" />
<div id="my-popover" popover="hint">
<p>名前は全角カナで入力してください。</p>
</div>
<script>
const select = document.querySelector("input");
const popover = document.querySelector("#my-popover");
select.addEventListener("mouseover", () => {
popover.showPopover();
});
select.addEventListener("mouseout", () => {
popover.hidePopover();
});
</script>まとめ
popover属性の 3 つ目の値としてhintが追加されたpopover=hintは他のhintが表示された場合のみ自動的に閉じられるpopover=hintは簡単な解除（Light dismiss）が可能popover=hintの子要素にpopover=autoの子要素がある場合、子要素が表示されている間に親要素を閉じることはない
