ホバーでブートストラップポップオーバーが点滅しています

Question

アイコン付きのトグルされたサイドバーを作成しました。 私はブーストラップのポップオーバーでアイコンを説明したかったのですが、左側からホバーするとポップオーバーにバグがあります。ポップオーバーが点滅し始めます。

アイコンを下からホバーすると、ポップオーバーが表示されます。 （内容がなくてもとにかく...）

私はコードを細かく分割して追加しました。パディングに問題はありますか？

$(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{ 
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>