Question

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

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

<强>已更新

我做了一些改变。试试这个：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'
    });
});

问题在于信息圈的填充。我把它裹在一个容器里。它现在没有闪烁。

希望它有所帮助。

Answer 2

您不再使用<serie><? return str_replace(array('&', '/') , array('&','and'), "{serie}"); ?></serie>作为可视箭头，而是使用tooltip-arrow和:before作为可视箭头。问题是你已经使箭头更大并制作了自己的三角形。当你制作你的CSS箭头时，你正在使用边框。您已将顶部边框颜色设置为白色和蓝色，使其看起来像箭头也有边框。在执行此操作时，您忘记了箭头仍然具有底部透明边框，并且此透明边框覆盖了您正在悬停的元素以部署工具提示。因此，为:after设置:before和:after psuedo元素，使其底部边框为none。像这样：

.tooltip-arrow

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

2 个答案: