提到 popover，相信大家都很熟悉，沒錯，就是組件庫里經(jīng)常見到的懸浮層（或者叫“氣泡卡片”），比如 Ant Design。

現(xiàn)在，這個好用的特性終于要在Chrome 114上正式支持了~下面花幾分鐘快速了解一下吧。

一、popover 屬性

其實這個名稱以前叫做popup，后來才更改成了popover??。

popover是一個全局屬性。給任意元素添加popover以后，它就變成了一個懸浮層。

<div popover>我是懸浮層</div>

popover有兩個值，分別是：

• auto：自動（默認(rèn)值）。也就是瀏覽器默認(rèn)行為，比如點擊懸浮層外面會關(guān)閉懸浮層，按鍵盤Esc鍵也會關(guān)閉懸浮層。
• manual：手動。也就是沒有前面的默認(rèn)行為，所有操作必須由開發(fā)者手動控制。

<div popover>我是懸浮層</div>
<div popover="auto">我是懸浮層</div>
<div popover="manual">我是懸浮層</div>

懸浮層默認(rèn)是隱藏的，也不能通過屬性設(shè)置默認(rèn)顯示。那么，如何打開一個懸浮層呢？

二、控制懸浮層的方式

控制懸浮層有兩種方式，分別是 聲明式 和 命令式。

首先來看聲明式，經(jīng)常寫原生HTML的應(yīng)該會很喜歡這種方式，無需 JS 介入就可以實現(xiàn)懸浮層的打開和關(guān)閉，如下：

<button popovertarget="pop1">打開 auto 懸浮層</button>
<div id="pop1" popover>我是 auto 懸浮層</div>

只需要通過popovertarget屬性將目標(biāo)懸浮層的id屬性和按鈕相關(guān)聯(lián)就行了（注意，只能是ID），效果如下：

還可以通過popovertargetaction屬性來設(shè)置點擊行為，有三個值，分別是：

• show：打開。
• hide：關(guān)閉。
• toggle：切換（默認(rèn)值）。如果懸浮層是關(guān)閉的就打開，反正亦然。

<button popovertarget="pop1" popovertargetaction="show">打開 auto 懸浮層</button>
<button popovertarget="pop1" popovertargetaction="hide">關(guān)閉 auto 懸浮層</button>
<button popovertarget="pop1" popovertargetaction="toggle">切換 auto 懸浮層</button>
<div id="pop1" popover>我是 auto 懸浮層</div>

效果如下：

現(xiàn)在回過頭來看看兩種popover的區(qū)別。

<button popovertarget="pop1">切換 auto 懸浮層</button>
<button popovertarget="pop2">切換 manual 懸浮層</button>
<div id="pop1" popover>我是 auto 懸浮層</div>
<div id="pop2" popover="manual">我是 manual 懸浮層</div>

效果如下：

可以看到，auto懸浮層點擊空白會自動關(guān)閉（還可以通過Esc鍵關(guān)閉），而manual懸浮層只能手動去關(guān)閉。當(dāng)然大部分情況下auto可以滿足需求。

三、命令式方式

所謂“命令式”，其實就是一套JS API，需要在 JS中主動去調(diào)用。

那么，有了聲明式為啥還要命令式呢？答案是，更靈活。

比如，前面的聲明式，只適用于click場景，如果需要hover也能打開懸浮層，這種方式就不行了。像這種情況，就可以采用命令式方式了。

先看語法，很簡單，就是 3 個方法。

popoverEl.showPopover(); // 打開
popoverEl.hidePopover(); // 關(guān)閉
popoverEl.togglePopover(force) // 切換，可傳參數(shù)，強(qiáng)制設(shè)置為 true 或者 false

需要注意的是，這 3 個方式僅適用于懸浮層，也就是必須有popover屬性，如果是普通元素，會直接報錯，如下：

還有一種情況，如果一個本來已經(jīng)打開的懸浮層，再次調(diào)用showPopover()，也會報錯，反之亦然

因此，在使用 JS 控制時，推薦使用manual懸浮層，便于精準(zhǔn)控制。

下面來看一個hover控制的例子。

<button id="button">hover 打開懸浮層</button>
<div id="pop" popover="manual">我是 hover 懸浮層</div>

然后是相關(guān)JS。

button.addEventListener('mouseenter', () => {
  pop.showPopover()
})
button.addEventListener('mouseleave', () => {
  pop.hidePopover()
})

效果如下：

四、判斷懸浮層的打開狀態(tài)

首先，從HTML結(jié)構(gòu)上來看，打開和關(guān)閉沒有任何屬性變化，這個和details不一樣（details會添加open屬性）。為此，CSS 還專門出了一個偽類:open用于標(biāo)識懸浮層的打開狀態(tài)。

目前還不穩(wěn)定，后續(xù)可能會更變?yōu)?popover-open。

div
  /* 打開樣式 */
}

通過這個偽類，我們可以很輕松的給懸浮層添加過渡動畫。

[popover]{
  display: block; /*默認(rèn)是display:none，不會有動畫*/
  visibility: hidden;
  opacity: 0;
  transform: scale(.6);
  transition: .3s;
}
[popover]:open{
  visibility: visible;
  transform: scale(1);
  opacity: 1;
}

效果如下：

除了 CSS 方式，JS 也能判斷懸浮層的狀態(tài)，但是并不是自己想象的那樣。

起初，我以為有一個屬性可以直接獲取到懸浮層的狀態(tài)，發(fā)現(xiàn)并不行，如下：

popoverEl.open // undefined

那如何獲取呢？

其實可以借助前面 CSS 的方式，只要匹配的:open偽類不就可以了嗎，需要用到matches方法。

https://developer.mozilla.org/en-US/docs/Web/API/Element/matches。

這樣就能隨時獲取到懸浮層的打開狀態(tài)了

popoverEl.matches(':open')

另外，還可以通過事件監(jiān)聽的方式來獲取，需要用到新的事件toggle，這是一個專門針對popover新推出的事件，使用方式如下：

popoverEl.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("打開狀態(tài)");
  } else {
    console.log("關(guān)閉狀態(tài)");
  }
});

五、popover 的頂層特性

前面說了那么多，好像并沒有什么很厲害的地方，隨便一個 div 都可以模擬，而且現(xiàn)在的組件庫不是也實現(xiàn)的好好的嗎？到底有什么優(yōu)勢呢？

打開控制臺可以看到，popover上有一個很特殊的標(biāo)識。

這個就是頂層 top-layer ！也就是層級是最高的，高于頁面上的一切。

這也是懸浮層的意義所在，本身就應(yīng)該是懸浮在最上面。下面是示意圖

這樣的好處就是無論在 HTML中的任何位置，都無需擔(dān)心懸浮層被遮擋的情況，也無需將懸浮層移動的最外層body上。

以上完整代碼可以查看以下任意鏈接：

• popover (juejin.cn)^[1]
• popover (codepen.io)^[2]
• popover (runjs.work)^[3]

如果瀏覽器不支持，會有下面提示：

這個是用@supports實現(xiàn)的。

@supports selector([popover]:open) {
    .no-support{
        display: none !important;
    }
}

六、兼容性和總結(jié)

看一下兼容性，目前只有Chrome 114+支持，內(nèi)部項目可以嘗鮮一下，如果是Electron應(yīng)用，那就大膽使用吧。

下面來總結(jié)一下本文要點：

1. popover是一個全局屬性。給任意元素添加popover以后，它就變成了一個懸浮層。
2. popover屬性有兩個值，默認(rèn)是auto自動模式，支持默認(rèn)行為，比如點擊空白關(guān)閉，鍵盤Esc關(guān)閉。
3. popover屬性還支持manual手動模式，也就是沒有以上默認(rèn)行為。
4. 控制popover有兩種方式，分別是聲明式和命令式。
5. 聲明式是指通過HTML屬性來實現(xiàn)點擊交互。
6. 可以通過popovertarget屬性將懸浮層的id和按鈕相關(guān)聯(lián)，這樣就能通過按鈕打開懸浮層了。
7. 還可以通過popovertargetaction屬性來設(shè)置點擊行為，有show、hide、toggle3種方式。
8. 命令式是指通過 JS API來實現(xiàn)對懸浮層的控制，相比聲明式而言更加靈活。
9. 控制懸浮層的方法有showPopover、hidePopover、togglePopover。
10. CSS偽類:open可以區(qū)分懸浮層的打開狀態(tài)。
11. JS 可以通過matches(':open')來獲取懸浮層的打開狀態(tài)。
12. JS 還可以通過監(jiān)聽toggle事件來獲取懸浮層的打開狀態(tài)，方式是event.newState。
13. 相比傳統(tǒng)實現(xiàn)，原生popover最大的優(yōu)勢是支持頂層特性。

最近正在對xy-ui[4]進(jìn)行升級改造，里面的 popover 組件就使用到了這一特性，不過也對不支持的瀏覽器做了兼容，有興趣的可以去體驗一下。

https://xy-ui.codelabo.cn/components/popover。

參考資料

[1]popover (juejin.cn): https://code.juejin.cn/pen/7229985240335269943。

[2]popover (codepen.io): https://codepen.io/xboxyan/pen/MWPrRod。

[3]popover (runjs.work): https://runjs.work/projects/d38b9c37b0d04897。

[4]xy-ui: https://github.com/XboxYan/xy-ui。