引导弹出窗口在闪烁

Question

我创建了一个带图标的切换边栏。 我想用buraprap popover来描述图标，但是如果将它从左侧悬停，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类的属性，它会工作

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

要显示酥料饼