如何实现鼠标悬停div时触发popover并在离开时隐藏

要实现鼠标悬停info div时显示popover、离开时隐藏的效果，原生HTML Popover API默认是点击触发，因此需要通过JavaScript监听鼠标事件来手动控制popover的显示/隐藏，以下是具体实现方案：

基础实现（悬停Info时显示，离开Info时隐藏） #

HTML 结构 #

保留原有布局，移除不需要的popovertarget属性（将通过JS手动控制）：

<!-- 父级容器需设置 position: relative -->
<div class="relative">
  <div 
    id="info-trigger"
    class="absolute cursor-help right-1 top-0 bottom-0 m-auto rounded-full border-2 border-cyan-400 text-cyan-400 w-1 h-1 p-2 flex justify-center items-center"
  >i</div>
  <div id="function-help" popover>Here's how to input a function:</div>
</div>

JavaScript 控制 #

通过监听mouseenter和mouseleave事件，调用Popover API的showPopover()和hidePopover()方法：

const infoTrigger = document.getElementById('info-trigger');
const helpPopover = document.getElementById('function-help');

// 鼠标进入Info区域时显示popover
infoTrigger.addEventListener('mouseenter', () => {
  helpPopover.showPopover();
});

// 鼠标离开Info区域时隐藏popover
infoTrigger.addEventListener('mouseleave', () => {
  helpPopover.hidePopover();
});

优化体验：鼠标移到Popover上时保持显示 #

基础实现会在鼠标离开Info div时立即隐藏popover，若希望鼠标移到popover上时保持显示，直到离开Info和popover区域再隐藏，可通过延迟定时器实现：

const infoTrigger = document.getElementById('info-trigger');
const helpPopover = document.getElementById('function-help');
let hideTimeout;

// 显示popover并清除延迟隐藏的定时器
function showPopover() {
  clearTimeout(hideTimeout);
  helpPopover.showPopover();
}

// 设置延迟隐藏popover，给鼠标从Info移到Popover留缓冲时间
function hidePopover() {
  hideTimeout = setTimeout(() => {
    helpPopover.hidePopover();
  }, 200);
}

// 给Info区域绑定事件
infoTrigger.addEventListener('mouseenter', showPopover);
infoTrigger.addEventListener('mouseleave', hidePopover);

// 给Popover区域绑定事件，避免移到Popover上时隐藏
helpPopover.addEventListener('mouseenter', showPopover);
helpPopover.addEventListener('mouseleave', hidePopover);

补充说明 #

• 原生HTML Popover API兼容性：Chrome、Edge、Firefox 114+、Safari 16.4+均已支持，如需兼容旧浏览器，可使用第三方popover库（如Bootstrap Popover）替代。
• 你原有的Tailwind CSS类可保留，用于控制Info div的样式和定位。

内容的提问来源于stack exchange，提问作者Jaideep Shekhar