Interest invokers
ユーザーがホバー、フォーカス、長押しなどの「関心」を示す操作を行った際に、ターゲット要素に対してアクションを自動的に発火する仕組みです。ツールチップやポップオーバーの表示など、JavaScriptなしでインタラクティブなUIパターンを実現できます。疑似要素を使ってソースとターゲットのスタイリングも可能です。
概要
ユーザーがホバー、フォーカス、長押しなどの「関心」を示す操作を行った際に、ターゲット要素に対してアクションを自動的に発火する仕組みです。ツールチップやポップオーバーの表示など、JavaScriptなしでインタラクティブなUIパターンを実現できます。疑似要素を使ってソースとターゲットのスタイリングも可能です。
対応ブラウザ
デスクトップ
Chrome 142+
Edge 142+
Safari 未対応
Firefox 未対応
モバイル
Chrome Android 142+
Safari iOS 未対応
Firefox Android 未対応
基本構文
HTML
<button interestfor="tooltip">ヘルプ</button>
<div id="tooltip" popover>説明テキスト</div>
/* 疑似要素でスタイル適用 */
:interest-target {
opacity: 1;
}実務での使いどころ
-
宣言的ツールチップの実装
interestfor属性でホバー・フォーカス時にポップオーバーを自動表示し、JavaScriptなしでツールチップを実装します。
注意点
- 2026年3月時点でChrome/Edgeのみの対応です。非常に新しいAPIのため、仕様が変更される可能性があります。
アクセシビリティ
- ホバーだけでなくフォーカス操作でもコンテンツにアクセスできることを確認し、キーボードユーザーへの対応を確保してください。