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