HTML popover 屬性

定義和用法

popover 屬性將元素定義為彈出元素，這意味著當元素被調用時，它將被放置在內容的頂部，不會干擾其他 HTML 元素的位置。

彈出元素在被另一個元素調用之前將是不可見的。另一個元素必須有一個 popovertarget 屬性，其值引用彈出元素的 id。

彈出元素將被放置在所有其他內容的頂部，通過點擊 popovertarget 元素，彈出元素可在顯示和隱藏之間切換：

Hello

彈出元素可以是像上面的例子中的單個 HTML 元素，也可以是像下面的例子中的一整套 HTML 元素。

另請參閱：

HTML 參考手冊：HTML Input popovertarget 屬性

HTML 參考手冊：HTML Input popovertargetaction 屬性

實例

例子 1

添加一個帶有 popover 屬性的 <h1> 元素，以及一個顯示/隱藏它的按鈕：

<h1 popover id="myheader">Hello</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