Bootstrap 悬停时弹出窗口闪烁

Question

我创建了一个带图标的切换侧边栏。我想通过 boostrap popover 来描述图标，但是如果从左侧悬停它，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

只需更改 .popover 的属性 class 就可以了

.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;
}

<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 2

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

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

在我的例子中，没有定义边界选项，弹出窗口被限制在边栏中存在的 space，因此它被定位在图标上。因此，因为弹出窗口出现在图标上方，所以当我将鼠标悬停在图标上时，弹出窗口出现，并且因为它在图标上方，这意味着我的鼠标不再悬停在图标上，所以弹出窗口消失，然后因为鼠标仍在上方图标，弹出窗口出现，因此鼠标不会再次触摸图标，因此弹出窗口消失，等等，产生闪烁。

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

Bootstrap 悬停时弹出窗口闪烁

Bootstrap popover is blinking on hover

css

twitter-bootstrap

bootstrap-popover