popover=""
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | グローバル属性 |
popover属性は、要素がポップオーバー要素であることを示します。
ポップオーバー要素は、非表示の状態ではレンダリングされず、表示の状態では他のコンテンツの上に重なる形でレンダリングされます。
<div popover="auto" id="example">ポップオーバー要素</div>
| 属性 | 値 | ||
|---|---|---|---|
| グローバル属性 | |||
popover="" |
ポップオーバー要素 | auto |
開いた時に他のポップオーバーを閉じる、ライトディスミスされる |
manual |
他のポップオーバーを閉じない、ライトディスミスされない | ||
| 空文字列 | auto と同じ |
||
- ライトディスミス（簡易非表示）とは、Escキーを押すか、ポップオーバーの外側をクリックすることでポップオーバーが閉じられることを言います。
- 無効な値を指定した場合は
manualと同じ扱いになります。
ポップオーバー要素の操作について
ポップオーバー要素の表示・非表示の切り替えは、popovertarget="" や popovertargetaction="" が指定されたボタンによって行うことができます。
<input type="button" popovertarget="test" popovertargetaction="show" value="開く">
<input type="button" popovertarget="test" popovertargetaction="hide" value="閉じる">
<div popover="auto" id="test">
ポップオーバー要素
</div>
上記の例では、test というID名によってボタンとポップオーバー要素を関連付け、popovertargetaction="" によってボタンを押した時の動作を指定しています。
詳しくは下記のページを参考にしてください。
- 上記の他、JavaScript（
togglePopover()、showPopover()、hidePopover()メソッド）によっても表示・非表示を切り替えることができます。
指定できる要素
popover属性はグローバル属性のため、全てのHTML要素に指定することができます。
- ただし、属性と要素の組み合わせによっては効果がない場合もあります。
- 旧HTMLからの変更点
-
- HTML LS：popover属性が定義されました。［2023/04/20］
使用例
- 未対応のブラウザでは、ポップオーバー要素の内容が常に表示された状態になります。
<p><button type="button" popovertarget="pop1" popovertargetaction="toggle">表示/非表示</button></p>
<div popover="auto" id="pop1">
<p>ポップオーバー要素A</p>
</div>
- 表示例
-
ポップオーバー要素A
<p>
<input type="button" popovertarget="pop2" popovertargetaction="show" value="表示">
<input type="button" popovertarget="pop2" popovertargetaction="hide" value="非表示">
</p>
<div popover="manual" id="pop2">
<p>ポップオーバー要素B</p>
</div>
- 表示例
-
ポップオーバー要素B