HTML popover 属性

定義と用法

popover 属性は、要素を弹出元素として定義し、これは要素が呼び出されたときに、内容の上に配置され、他のHTML要素の位置に干渉しないことを意味します。

弹出元素は、他の要素によって呼び出される前に見えません。もう一つの要素には、弹出要素のidを参照するpopovertarget属性を持つ必要があります。

弹出元素は、他のすべての内容の上に配置され、popovertarget要素をクリックすることで、弹出元素は表示と非表示の間で切り替わります：

こんにちは

弹出元素可以是像上面的例子中的单个HTML元素，也可以是像下面的例子中的一整套HTML元素。

も参照してください：

HTML 参考マニュアル：HTML Input popovertarget 属性

HTML 参考マニュアル：HTML Input popovertargetaction 属性

インスタンス

例 1

popover属性を持つ<h1>要素と、それを表示/非表示にするボタンを追加します：

<h1 popover id="myheader">こんにちは</h1>
<button popovertarget="myheader">クリックして！</button>

実際に試してみてください

例 2

div要素をポップアップ要素として使用する：

<div popover id="mydiv">
  <h2>Popover</h2>
  <hr>
  <p>ポップアップウィンドウは、他のすべての要素の上に配置される要素です。</p>
  <p>重要なことを伝えたい場合に使用できます。</p>
</div>

実際に試してみてください

文法

<element popover>

属性値

popover 属性はボルン属性です。設定されている場合、その要素がポップアップウィンドウ要素であることを指定します。

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
114 114 サポートされていません 17 100