HTML popover 屬性
定義和用法
popover
屬性將一個元素定義為一個 popover 元素,這意味著當它被呼叫時,它將顯示在內容之上,不會干擾其他 HTML 元素的位置。
popover 元素在被另一個元素呼叫之前是不可見的。另一個元素必須有一個 popovertarget
屬性,其值引用 popover 元素的 id。
popover 元素將顯示在所有其他內容之上,透過單擊 popovertarget 元素,popover 元素將在顯示和隱藏之間切換。
Hello
popover 元素可以是一個單獨的 HTML 元素,也可以是整個 HTML 元素的部分。請參閱下面的示例。
適用範圍
popover
屬性是 全域性屬性,可用於任何 HTML 元素,但該元素必須是可編輯的。
元素 | Attribute |
---|---|
所有 HTML 元素 | popover |
示例
示例
新增一個帶有 popover 屬性的 <h1> 元素,以及一個用於顯示/隱藏它的按鈕
<h1 popover id="myheader">Hello</h1>
<button popovertarget="myheader">Click me!</button>
自己動手試一試 »
示例
將 DIV 元素用作 popover 元素
<div popover id="mydiv">
<h2>Popover</h2>
<hr>
<p>Popover 是一個顯示在所有其他內容之上的元素。</p>
<p>當你想傳達重要資訊時可以使用它。</p>
</div>
自己動手試一試 »
瀏覽器支援
Attribute | |||||
---|---|---|---|---|---|
popover | 114 | 114 | 125 | 17 | 100 |