Bootstrap 工具提示在秒后消失 'show'

Question

我想根据一些用户输入生成手动工具提示。最简单的方法是隐藏所有工具提示，然后显示相关的工具提示。

我已将我的代码精简到最基本的部分，并且我的工具提示在第二个 "show" 之后一直消失。

我正在使用 bootstrap 3.3.4 和 jquery 2.1.3

隐藏后立即进行显示是否有问题，或者我的代码中是否缺少某些内容？

<input id="check" type="checkbox">

<script>
    var toolTipData = {
    placement: 'right',
    title: 'Checkmark checked',
    trigger: "manual"
};
$('#check').tooltip(toolTipData);

$(document).on('change', '#check', function () {
    $('#check').tooltip("hide");
    if (document.getElementById("check").checked) {
        $('#check').tooltip("show");
    }
});
</script>

这是一个 jsfiddle：https://jsfiddle.net/bbrally/4b9g0abh/

Answer 1

$(document).on('change', '#check', function () {
    if (document.getElementById("check").checked) {
        $('#check').tooltip("show");
    }
    else{
        $('#check').tooltip("hide");
    }
});

它试图隐藏（尽管不应该）将两种情况分开。

Answer 2

您遇到 "hide" 事件发生时间和 "show" 事件发生时间之间的竞争条件。根据文档，"hide/show" 事件实际上 return 在 "hidden/shown" 事件触发之前发送给调用者。

http://getbootstrap.com/javascript/#tooltips 向下滚动到工具提示下的 "Methods" 部分 ...Returns 给调用者在工具提示 实际上被隐藏了 ...

...Returns 给呼叫者在工具提示 实际显示 ...

我并不是说下面的代码是一个解决方案（虽然，它可能已经足够好了？），而是对您运行的解释。具体来说，250 毫秒的超时值会减慢它的速度，使其按您的预期工作。

var toolTipData = {
        placement: 'right',
        title: 'Checkmark checked',
        trigger: "manual"
    };
    $('#check').tooltip(toolTipData);

    $(document).on('change', '#check', function () {
        $('#check').tooltip("hide");
        if (document.getElementById("check").checked) {
            setTimeout(function() {
                $('#check').tooltip("show");
            }, 250);
        }
    });

希望对您有所帮助。

Bootstrap 工具提示在秒后消失 'show'

Bootstrap tooltip disappears after second 'show'

javascript

jquery

twitter-bootstrap

tooltip