用 popover="hint" 打造友好的 HTML 提示：一招讓界面更“懂人”
作者：dev
今天的這段“HTML 小魔法”，能幫你構建上下文友好的交互提示，不喧賓奪主、不干擾主體流程。 下個項目不妨一試，也歡迎分享實戰體驗與坑點。
最近翻到一篇文章：想把網頁做得“無感且順滑”并不難，難的是分層 UI（尤其是 tooltip / popover）寫著寫著就亂了套。 追求干凈、直覺的體驗沒問題，但要把多個彈層疊放而不打斷用戶流，常常是噩夢。此時，HTML 的 popover="hint" 成了救場“隊友”。
它允許在不關閉其它 popover 的情況下，打開類似 提示/預覽 的輕量界面；也就是說，能在不搶走焦點的前提下補充上下文。
先看實際效果
圖片
HTML popover="hint" 示例（運行中）
<!DOCTYPE html>
<html lang="en">
<head>
<style>
[popover="auto"] {
inset: unset;
position: absolute;
top: 100px;
justify-self: anchor-center;
margin: 0;
text-align: center;
padding: 8px;
}
[popover="hint"] {
inset: unset;
position: absolute;
top: calc(anchor(bottom) + 5px);
justify-self: anchor-center;
margin: 0;
padding: 8px;
border-radius: 6px;
background: #271717;
color: whitesmoke;
box-shadow: 1px 1px 3px #999;
border: none;
}
/* 幫助段落樣式 */
.help-para {
position: absolute;
top: 16px;
left: 16px;
background: #eee;
font-size: 0.8rem;
line-height: 1.3;
width: 50%;
max-width: 600px;
margin: 0;
padding: 16px;
box-shadow: 1px 1px 3px #999;
}
@media (max-width: 640px) {
.help-para {
width: auto;
right: 16px;
}
}
body {
margin: 50px;
padding: 10px;
border: 2px solid lightblue;
border-radius: 8px;
}
</style>
</head>
<body>
<div id="wrapper">
<section id="button-bar">
<button
popovertarget="submenu-1"
popovertargetaction="toggle"
id="menu-1"
>
Menu A
</button>
<button
popovertarget="submenu-2"
popovertargetaction="toggle"
id="menu-2"
>
Menu B
</button>
<button
popovertarget="submenu-3"
popovertargetaction="toggle"
id="menu-3"
>
Menu C
</button>
</section>
</div>
<div id="submenu-1" popover="auto">
<button>Option A</button><br /><button>Option B</button>
</div>
<div id="submenu-2" popover="auto">
<button>Option A</button><br /><button>Option B</button>
</div>
<div id="submenu-3" popover="auto">
<button>Option A</button><br /><button>Option B</button>
</div>
<div id="tooltip-1" class="tooltip" popover="hint">Tooltip A</div>
<div id="tooltip-2" class="tooltip" popover="hint">Tooltip B</div>
<div id="tooltip-3" class="tooltip" popover="hint">Tooltip C</div>
<script text="text/javascript">
const tooltips = document.querySelectorAll(".tooltip");
const btns = document.querySelectorAll("#button-bar button");
function addEventListeners(i) {
btns[i].addEventListener("mouseover", () => {
tooltips[i].showPopover({ source: btns[i] });
});
btns[i].addEventListener("mouseout", () => {
tooltips[i].hidePopover();
});
btns[i].addEventListener("focus", () => {
tooltips[i].showPopover({ source: btns[i] });
});
btns[i].addEventListener("blur", () => {
tooltips[i].hidePopover();
});
}
for (let i = 0; i < btns.length; i++) {
addEventListeners(i);
}
</script>
</body>
</html>就是這么簡單：少量 HTML + CSS + JS，就能得到一個上下文感知的小提示——鼠標懸停顯示、移開即收起，既溫柔又不打擾。
還有細節值得說
設置 popover="hint" 的提示，與 popover="auto" 或 popover="manual"并不相同。
- 它是 輕可關閉（light-dismissible） 的：點擊外部或按下 ESC 即退出；
- 它不會把 auto 彈層一并關掉；
- 但它會關閉其他 hint，避免屏幕被提示“刷屏”。
快速對比表
Feature |
|
|
|
Light Dismiss | Yes | Yes | No |
Closes Others | Hints, Autos | Other Hints | Nothing |
Nesting | Yes | Special | N/A |
嵌套：最容易“繞暈”的一處
有時 tooltip 是“獨立一顆”，有時卻是**“富提示”（像 GitHub 頭像預覽那樣內部還有細小提示）。這種場景下，內層提示不應**把父級直接關掉。
可以這么記：
- 系統維護兩套“棧”：
- auto stack：為 popover="auto"；
- hint stack：為獨立的 hint。
- **auto 內的 hint**：并入 auto stack；
- **hint 內的 hint**：仍留在 hint stack；
- **hint 里不能再嵌 auto**。
把它當“圖層”去理解就好：hint 在 auto 里，跟著父級走；此時鼠標碰到其它不相關的 hint，不會拆父層結構。
一句話總結
今天的這段“HTML 小魔法”，能幫你構建上下文友好的交互提示，不喧賓奪主、不干擾主體流程。 下個項目不妨一試，也歡迎分享實戰體驗與坑點。
感謝閱讀，我們下次見，帶來更多實用的 HTML 小技巧。
責任編輯：武曉燕
來源：
大遷世界
