Interest Invoker Popoverジェネレーターとは
interestfor invokerコマンド（Chrome 142+）は、ユーザーがトリガー要素にホバーまたはフォーカスしたときにポップオーバーを開く宣言型HTML属性です。ボタンにcommandfor='popover-id'とcommand='interestfor'を設定し、ターゲットdivにpopover='hint'を設定します。ポップオーバーはホバーとフォーカスの両方で開くため、デフォルトでキーボードアクセシブルになります。これにより、手動のmouseenter/mouseleaveハンドラとpopover.showPopover()/hidePopover()を置き換えます。
クイックアンサー
ボタンにcommandfor='popover-id'とcommand='interestfor'を使用して、JavaScriptなしでホバーとフォーカスでポップオーバーを開きます。ターゲットにpopover='hint'を設定してツールチップ動作を実現します。Chrome 142+。
Last updated: 2026-06-03
制限事項
- interestforコマンドにはChrome 142+が必要です。他のブラウザはまだサポートしておらず、ポリフィルもありません。サポートされていないブラウザではポップオーバーは単に開きません。
- interestforで開かれたポップオーバーはインタラクティブコンテンツを含むことができません。フォーカスが離れると閉じます。インタラクティブなポップアップには、代わりにクリック時のtogglePopoverまたはshowPopoverを使用してください。
- interestforはポップオーバーターゲットがページ読み込み時にDOMに存在することを必要とします。動的に作成されたポップオーバー要素は、interestforが参照できる前に登録する必要があります。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- ポップオーバー要素を作成し、popover属性をhint（ツールチップ用）またはautoに設定します。
- commandforがポップオーバーIDを指し、commandがinterestforに設定されたトリガーボタンを追加します。
- オプションでトリガーにホバースタイルのCSSを追加し、アンカー配置でポップオーバーを配置します。
- アクセシビリティのために、マウスホバーとキーボードフォーカスの両方でポップオーバーが開くことをテストします。
主な用途
- JavaScriptを1行も書かずに、ホバーとフォーカスで開くアクセシブルなツールチップを作成します。
- ユーザーがリンクにホバーまたはタブ移動したときに詳細を表示する、製品リンクのホバーカードプレビューを構築します。
- JavaScriptベースのホバーメニューを、マウスとキーボードで一貫して動作する宣言型ポップオーバーに置き換えます。