Bootstrap 弹出窗口在悬停时闪烁

Question

我创建了一个带有图标的切换侧边栏。我想通过 boostrap popover 来描述该图标，但是如果将其悬停在左侧，则弹出窗口会出现错误。弹出窗口开始闪烁。

当我将鼠标悬停在底部的图标时，将显示弹出窗口。（反正没有内容……）

我添加了代码的缩小片段。填充有问题吗？

$(document).ready(function() {
  $('[data-toggle="popover"]').popover();
});

.left-side {
  width: 100%;
  background: #CCC;
  margin-right: 100px;
}

.right-side {
  position: absolute;
  right: 0;
  top: 10px;
  width: 80px;
  height: 200px;
  background: #000;
  color: #FFF;
  text-align: center;
  font-size: 28px;
  padding: 10px;
}

.pmo-icon {
  display: block;
  padding: 20px
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="left-side">
  <h1>title</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
<div class="right-side">
  <div class="pmo-icon" data-html='true' data-toggle='popover' data-trigger='hover' data-placement='left' title='My title' data-content="<p>Lorem ipsum</p>">
    <i class="fa fa-home"></i>
  </div>
</div>

Answer 1

我遇到了同样的问题，我用选项边界解决了它，如下所示：

$('[data-toggle="popover"]').popover({
    boundary:'window',
    html: true
  })

就我而言，如果没有定义边界选项，弹出窗口就会被限制在侧边栏中现有的空间内，因此它被定位在图标上方。因此，因为弹出窗口出现在图标上方，所以当我将鼠标悬停在图标上时，弹出窗口就会出现，并且因为它位于图标上方，这意味着我的鼠标不再悬停在图标上，所以弹出窗口消失，然后因为鼠标仍在上方图标，弹出窗口出现，并且由于鼠标不会再次触摸该图标，因此弹出窗口消失，等等，产生闪烁。

使用选项边界，弹出窗口出现在它应该出现的位置，而不是在图标上方，并且悬停时不再闪烁。

Answer 2

只要你可以改变 .popover 类的属性它就会起作用

.popover{
margin-right:0;
width:100px;
}

.popover{
margin-right:0;
width:100px;
}

$(document).ready(function() {
  $('[data-toggle="popover"]').popover();
});

.left-side {
  width: 100%;
  background: #CCC;
  margin-right: 100px;
}

.right-side {
  position: absolute;
  right: 0;
  top: 10px;
  width: 80px;
  height: 200px;
  background: #000;
  color: #FFF;
  text-align: center;
  font-size: 28px;
  padding: 10px;
}

.pmo-icon {
  display: block;
  padding: 20px;
}
.popover{
margin-right:0;
width:100px;
}