用HTML内置的popover属性做一个提示窗

最近我在阅读一篇关于如何构建"让用户感觉毫不费力"的Web界面的文章，但像tooltip这样的分层UI元素可能成为编码噩梦。

我热爱那种简洁直观的体验，但不破坏操作流程的分层提示实现起来却很麻烦。HTML中的popover=hint属性成了我的新宠。

这个属性允许你打开工具提示或预览等UI元素，同时不会关闭其他已打开的提示。这是一种轻量级的上下文展示方式，不会抢占用户的注意力焦点。

让我们通过一个简单示例来理解其底层工作原理。

HTMLpopover=hint实际应用示例

!DOCTYPEhtmlhtmllang="en"headstyle[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:999;border:none;}/*Stylinghelppara*/.help-para{position:absolute;top:16px;left:16px;background:999;}@media(max-width:640px){.help-para{width:auto;right:16px;}}body{margin:50px;padding:10px;border:2pxsolidlightblue;border-radius:8px;}/style/headbodydivid="wrapper"sectionid="button-bar"buttonpopovertarget="submenu-1"popovertargetaction="toggle"id="menu-1"MenuA/buttonbuttonpopovertarget="submenu-2"popovertargetaction="toggle"id="menu-2"MenuB/buttonbuttonpopovertarget="submenu-3"popovertargetaction="toggle"id="menu-3"MenuC/button/section/divdivid="submenu-1"popover="auto"buttonOptionA/buttonbr/buttonOptionB/button/divdivid="submenu-2"popover="auto"buttonOptionA/buttonbr/buttonOptionB/button/divdivid="submenu-3"popover="auto"buttonOptionA/buttonbr/buttonOptionB/button/divdivid="tooltip-1"class="tooltip"popover="hint"TooltipA/divdivid="tooltip-2"class="tooltip"popover="hint"TooltipB/divdivid="tooltip-3"class="tooltip"popover="hint"TooltipC/divscripttext="text/javascript"consttooltips=(".tooltip");constbtns=("#button-barbutton");functionaddEventListeners(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(leti=0;;i++){addEventListeners(i);}/script/body/html

就是这样！通过简单的JavaScript、CSS和HTML就实现了一个具有上下文感知能力的用户界面。当鼠标悬停时提示会出现，移开后又会自动消失。

使用popover=hint设置的提示弹窗与popover=auto或popover=manual有所不同。

快速对比表：

功能特性

Popover=Auto

Popover=Hint

Popover=Manual

轻量关闭

支持

支持

不支持

关闭其他弹窗

提示和自动弹窗

仅其他提示

无影响

嵌套支持

支持

特殊处理

不适用

提示嵌套可能会变得复杂。大多数工具提示都是独立的，但有时你可能需要像GitHub个人资料预览那样的"富"提示，其中包含自身也带有提示的元素。这些内部提示不应关闭父级提示。

关键规则：

存在两个堆栈："auto堆栈"（用于popover=auto）和"提示堆栈"（用于独立提示）

auto弹窗内的提示会加入auto堆栈

提示内的其他提示会留在提示堆栈中

auto弹窗不能嵌套在提示内部

我知道这可能有点令人困惑。记住这个技巧：把它想象成图层。auto弹窗内的提示会跟随其父级，因此悬停无关提示不会破坏这种关联。