Bootstrap工具提示重复打开和关闭

Question

我有一个自定义样式的引导工具提示。它似乎有一个问题。每当我们将鼠标悬停在它上面时，它就会打开并立即关闭。

HTML -

<div class="container" style="padding-top:300px"> 
<div class="row"> 
    <div class="col-md-12"> 
     <span>A bunch of random text</span><span class="info-circle" data-html="true" title="" data-original-title="Tooltip Text">i</span> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-12"> 
     <span>A bunch of random text</span><span class="info-circle" data-html="true" title="" data-original-title="Tooltip Text">i</span> 
    </div> 
</div> 

下面是一个内嵌链接jsFiddle

Answer 1

您不再使用tooltip-arrow作为视觉箭头，您使用:before和:after作为视觉箭头。问题是你已经把箭头做得更大，并制作出自己的三角形。当你制作你的css箭头时，你正在使用边框。您已将顶部边框颜色设置为白色和蓝色，以使其看起来像箭头也有边框。在这样做的时候，你已经忘记了你的箭头仍然有一个底部透明边框，并且这个透明边框覆盖了你正在盘旋的元素来部署工具提示。因此请为.tooltip-arrow设置:before和:after psuedo元素的底部边界为无。像这样：

.tooltip.top .tooltip-arrow:after { 
    content: " "; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
    left: -17px; 
    top: -5px; 
    border-width: 12px; 
    border-top-color: #003f6e; 
    border-bottom:none; 
} 
.tooltip.top .tooltip-arrow:before { 
    content: " "; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
    left: -15px; 
    top: -5px; 
    border-width: 10px 10px 0; 
    border-top-color: #fff; 
    border-bottom:none; 
    z-index: 1; 
} 

Answer 2

修订

我做了一些改动。试试这个：https://jsfiddle.net/2h7jbt9n/6/

HTML

<div class="container" style="padding-top:30px"> 
<div class="row"> 
    <div class="col-md-12"> 
     <span>A bunch of random text</span><span class="info-circle" title="YoHo Ho Ho" data-placement="top" data-toggle="tooltip">i</span> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-md-12"> 
     <span>A bunch of random text</span><span class="info-circle" title="YoHo Ho Ho" data-placement="top" data-toggle="tooltip">i</span> 
    </div> 
</div> 

JS

$(document).ready(function(){ 
    $('[data-toggle="tooltip"]').tooltip({ 
     container: '.info-circle' 
    }); 
}); 

问题是与填充的信息圈。我把它包装在一个容器中。它现在不闪烁。

希望它有帮助。