by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11801
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、关于popover=hint

去年年初有介绍HTML popover属性，详见“该使用原生popover属性模拟下拉了”一文。

可以说是弹出浮层最佳解决方案，自动显隐特性，外加顶层特性，非常香。

但是有一个问题，那就是一次最多只能有一个弹出层显示（如果不使用 showPopover() 方法手动设置的话），但是有些轻提示，仅仅是用做信息展示，可以无需关闭之前的弹出层，之前的popover属性能力就不够。

于是，从Chrome 133开始，popover属性新增了属性值hint，表示轻提示，显示的时候不会影响之前的弹出层。

二、hint值使用案例

一例胜千言。

我们开看一个hint值使用案例，HTML代码如下所示：

<button popovertarget="datalist">点击我 ▼</button>
<div id="datalist" popover>
  <option>列表1</option>
  <option>列表2</option>
</div>
<!-- 轻提示 -->
<button 
  class="hint" 
  onmouseover="hint.showPopover();" 
  onmouseout="hint.hidePopover();"
>?</button>
<div id="hint" popover="hint">我是轻提示文字内容</div>

我们使用CSS锚点定位，让提示框的位置都跟随按钮(非必须)：

[popovertarget="datalist"] {
  anchor-name: --button-anchor;
}

#datalist {
  position-anchor: --button-anchor;
}

[popover] {
  left: anchor(left);
  top: calc(anchor(bottom) + 5px);
  right: auto;
  bottom: auto;
}

.hint {
  anchor-name: --hint-anchor;
}

#hint {
  background: #0009;
  color: #fff;
  position-anchor: --hint-anchor;
}

此时，我们点击第一个按钮，让列表显示，鼠标再经过第2个按钮的时候，第一个列表并未隐藏，如下截图所示：

如果<div id="hint" popover="hint">这段HTML代码是<div id="hint" popover>，那么鼠标hover问号按钮的时候，前面的下拉列表就会隐藏。

如下GIF录屏示意：

需要注意的是，如果点击行为，哪怕浮层设置的是popover="hint"，那么先前所有popover="auto"的浮层都会隐藏。

值hint适合用在鼠标悬停，focus/blur等事件中，或者直接JS触发的轻提示环境，类似于toast提示效果这种。

三、popover属性值含义

popover属性目前支持3个值：

auto

默认值。浮层在点击的时候，或者出现其他 auto 类型的浮层的时候自动关闭。

hint

最新支持的值。非点击行为触发的浮层显示，不会关闭之前 auto 类型的浮层，但是会关闭其他 hint 类型的浮层。

manual

手动浮层。也就是浮层的关闭需要开发者或者用户手动触发。此值和auto同一时间支持的。

hint值的出现算是补充了某一类交互场景的实现。

四、结语

popover=hint 填补了轻量级提示与模态弹窗间的需求空白，尤其适合需非打断性辅助信息的场景。开发者可通过它减少传统工具提示库的依赖，但需注意渐进增强策略以兼容旧浏览器。

好了，就这些。

最后，如果你觉得本文内容还不错，看在我家宋玉长老的面子上，转发，分享，点赞！

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11801

（本篇完）