用HTML内置的popover属性做一个提示窗
如何用Popover魔法在HTML中创建用户友好的提示
最近我在阅读一篇关于如何构建"让用户感觉毫不费力"的Web界面的文章，但像tooltip这样的分层UI元素可能成为编码噩梦。
我热爱那种简洁直观的体验，但不破坏操作流程的分层提示实现起来却很麻烦。HTML中的popover=hint属性成了我的新宠。
这个属性允许你打开工具提示或预览等UI元素，同时不会关闭其他已打开的提示。这是一种轻量级的上下文展示方式，不会抢占用户的注意力焦点。
实战演示
让我们通过一个简单示例来理解其底层工作原理。
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;
}
/* Styling help para */
.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>就是这样！通过简单的JavaScript、CSS和HTML就实现了一个具有上下文感知能力的用户界面。当鼠标悬停时提示会出现，移开后又会自动消失。
但还有更多惊喜！
使用popover=hint设置的提示弹窗与popover=auto或popover=manual有所不同。
它们属于轻量级可关闭类型，意味着点击外部区域或按ESC键就能关闭。它们不会关闭auto类型的弹窗，但会关闭其他提示以避免界面混乱。
快速对比表：
功能特性 | Popover=Auto | Popover=Hint | Popover=Manual |
轻量关闭 | 支持 | 支持 | 不支持 |
关闭其他弹窗 | 提示和自动弹窗 | 仅其他提示 | 无影响 |
嵌套支持 | 支持 | 特殊处理 | 不适用 |
嵌套：棘手的部分
提示嵌套可能会变得复杂。大多数工具提示都是独立的，但有时你可能需要像GitHub个人资料预览那样的"富"提示，其中包含自身也带有提示的元素。这些内部提示不应关闭父级提示。
关键规则：
- 存在两个堆栈："auto堆栈"（用于popover=auto）和"提示堆栈"（用于独立提示）
- auto弹窗内的提示会加入auto堆栈
- 提示内的其他提示会留在提示堆栈中
- auto弹窗不能嵌套在提示内部
我知道这可能有点令人困惑。记住这个技巧：把它想象成图层。auto弹窗内的提示会跟随其父级，因此悬停无关提示不会破坏这种关联。
