Question

我创建了一个带图标的切换边栏。我想通过boostrap popover来描述这个图标，但如果从左侧悬停它，那么popover就有一个bug。弹出窗口开始闪烁。

当我从底部悬停图标时，将显示弹出窗口。（无论如何......）

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

$(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类的属性它将起作用

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

在我的情况下，未定义边界选项，弹出框被限制在侧边栏中的空间中，因此它位于图标上方。因此，由于弹出窗口出现在图标上方，因此当我将鼠标悬停在图标上方时，就会出现弹出窗口，并且由于鼠标悬停在图标上方，这意味着我的鼠标不再悬停在图标上，因此弹出窗口消失了，则因为鼠标仍在上方图标，将显示弹出窗口，并且由于鼠标不再触摸该图标，因此弹出窗口消失了，等等，从而产生了闪烁。

使用选项边界，弹出框应显示在应有的位置，而不是在图标上方，并且在悬停时不再闪烁。

Bootstrap popover在悬停时闪烁

2 个答案: