引導彈出窗口在閃爍

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>

要顯示酥料餅