Vue.js 2结合bootstrap-vue与popper.js的popover持久化问题

我之前做项目时刚好碰到过一模一样的需求——要让popover在鼠标移到自身上面时保持显示，方便用户点击里面的CTA按钮。给你分享两个实用的方案，一个是纯原生JS的（不用任何第三方库），另一个是如果你继续用Popper.js的优化写法：

核心思路是用延迟隐藏+事件重置的逻辑：当鼠标离开触发按钮时，不立刻隐藏popover，而是设置一个短延迟；如果在延迟时间内鼠标移入了popover，就清除延迟，让popover保持显示。这样既解决了按钮和popover之间的鼠标过渡问题，又能实现移入popover时持久显示的需求。

代码示例 #

首先是HTML结构：

<button class="trigger-btn">悬停显示popover</button>
<div class="popover" style="display: none;">
  <p>这是popover的内容区域</p>
  <button class="cta-btn">点击执行操作</button>
</div>

然后是基础样式（可以根据你的需求调整）：

.popover {
  position: absolute;
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 1rem;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 10;
}

最后是核心JS逻辑：

const triggerBtn = document.querySelector('.trigger-btn');
const popover = document.querySelector('.popover');
let hideTimeout;

// 显示popover并定位
function showPopover() {
  clearTimeout(hideTimeout); // 清除之前的隐藏延迟
  popover.style.display = 'block';
  
  // 手动计算popover的位置（基于触发按钮）
  const btnRect = triggerBtn.getBoundingClientRect();
  popover.style.top = `${btnRect.bottom + window.scrollY + 10}px`;
  popover.style.left = `${btnRect.left + window.scrollX}px`;
}

// 延迟隐藏popover
function hidePopover() {
  hideTimeout = setTimeout(() => {
    popover.style.display = 'none';
  }, 200); // 200ms的延迟足够鼠标从按钮移到popover
}

// 绑定事件
triggerBtn.addEventListener('mouseenter', showPopover);
triggerBtn.addEventListener('mouseleave', hidePopover);
popover.addEventListener('mouseenter', showPopover); // 移入popover时重置延迟
popover.addEventListener('mouseleave', hidePopover);

如果你之前用Popper.js是为了处理popover的定位（比如自适应位置、避免溢出视口），那可以保留它的定位能力，同时套用上文的延迟隐藏逻辑，不用改Popper的核心配置。

代码示例 #

import { createPopper } from '@popperjs/core';

const triggerBtn = document.querySelector('.trigger-btn');
const popover = document.querySelector('.popover');
let hideTimeout;
let popperInstance;

// 初始化Popper实例
function initPopper() {
  popperInstance = createPopper(triggerBtn, popover, {
    placement: 'bottom-start', // 可以自定义定位方向
    modifiers: [
      {
        name: 'offset',
        options: {
          offset: [0, 10], // 按钮和popover之间的间距
        },
      },
    ],
  });
}

// 显示popover并更新定位
function showPopover() {
  clearTimeout(hideTimeout);
  popover.setAttribute('data-show', '');
  if (popperInstance) popperInstance.update(); // 让Popper重新计算位置
}

// 延迟隐藏popover
function hidePopover() {
  hideTimeout = setTimeout(() => {
    popover.removeAttribute('data-show');
  }, 200);
}

// 绑定事件
triggerBtn.addEventListener('mouseenter', () => {
  if (!popperInstance) initPopper(); // 首次悬停时初始化Popper
  showPopover();
});
triggerBtn.addEventListener('mouseleave', hidePopover);
popover.addEventListener('mouseenter', showPopover);
popover.addEventListener('mouseleave', hidePopover);

对应的CSS需要调整下显示逻辑：

.popover {
  display: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  padding: 1rem;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 10;
}

.popover[data-show] {
  display: block;
}

这个方案既保留了Popper.js强大的定位能力，又完美实现了你要的“移入popover时保持显示”的需求，比之前用jQuery绑定临时事件的写法更稳定。

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