Bootstrap Popover悬停时内容居中异常及右侧悬停闪烁问题求助

首先咱们得先揪出问题根源：你用!important硬写了popover的left和top定位值，这直接打乱了Bootstrap Popover原本和触发按钮绑定的定位逻辑。当鼠标从按钮右侧移动时，错位的popover会让鼠标频繁进入/离开按钮的hover触发范围，进而导致popover不停闪烁。

下面给你一套完整的修复方案，一步步来：

1. 移除硬编码定位，改用正确的居中方式 #

先删掉这段破坏定位逻辑的代码：

.popover{ left: 90px!important; top: 53px!important; }

方案A：让Popover相对于父容器居中 #

先给父容器设置相对定位，再用CSS transform实现水平居中：

.bs-example { 
  margin: 50px 50px; 
  position: relative; /* 让popover的绝对定位基于这个容器 */
}
.popover {
  left: 50%!important;
  transform: translateX(-50%); /* 实现水平居中 */
  top: auto!important;
  bottom: auto!important;
}

同时修改JS初始化代码，把popover挂载到父容器内，避免全局定位干扰：

$(document).ready(function() { 
  $('[data-toggle="popover"]').popover({ 
    placement: 'right', 
    trigger: 'hover', 
    width: '500px',
    container: '.bs-example' // 将popover插入到父容器中，定位更稳定
  }); 
});

方案B：让Popover相对于触发按钮居中 #

如果你希望popover围绕按钮居中（比如在按钮上方/下方居中），可以调整placement参数配合CSS：

$(document).ready(function() { 
  $('[data-toggle="popover"]').popover({ 
    placement: 'top', // 可选top/bottom/left/right
    trigger: 'hover', 
    width: '500px',
    container: '.bs-example'
  }); 
});

对应的CSS调整：

.popover.top {
  left: 50%!important;
  transform: translateX(-50%);
  margin-top: -10px; /* 调整popover和按钮的间距 */
}

2. 添加延迟触发彻底解决闪烁 #

即使定位正确，快速的hover切换偶尔也会触发闪烁，给popover添加显示/隐藏延迟就能完美规避：

$(document).ready(function() { 
  $('[data-toggle="popover"]').popover({ 
    placement: 'right', 
    trigger: 'hover', 
    width: '500px',
    container: '.bs-example',
    delay: {show: 100, hide: 300} // 显示延迟100ms，隐藏延迟300ms，避免快速触发
  }); 
});

最后保留你原本的其他样式即可：

.popover-content { padding: 2px 10px; }
.popover.right>.arrow{ display: none; }

这样调整后，popover既能稳定居中显示，鼠标从任何方向hover都不会出现闪烁问题了。

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