Bootstrap工具提示第二次“显示”后消失

Question

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

我已经将我的代码简化到了最基本的要素，但是我的工具提示在第二次“显示”后不断消失。

我正在使用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/。

- bbrally

Answer 1

您遇到了“隐藏”事件发生和“显示”事件发生之间的竞态条件。根据文档，“hide/show”事件实际上会在“hidden/shown”事件触发之前返回给调用者。

请参考以下链接中工具提示下的“方法”部分： http://getbootstrap.com/javascript/#tooltips ......在工具提示实际被隐藏之前，返回给调用者...... ......在工具提示实际被显示之前，返回给调用者...... 我不是在建议下面的代码是一个解决方案（虽然它可能足够好？），但是要解释一下你遇到的问题。具体而言，250ms的超时值将使其减慢，从而达到您期望的效果。

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);
        }
    });

希望这能帮到您。

- Shawn

---

谢谢您的解释。我之前并不是很理解“返回给调用者”的意思，也不确定是否出了问题，但现在我明白了。也许我会考虑重写我的代码逻辑，更有效地使用if/else语句。 - bbrally

没问题，很高兴能帮忙！ - Shawn

Answer 2

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

它试图隐藏，即使它不应该，在这两种情况下分开。

- Luis A Medina Ramos

---

这个确实可行，但我的完整程序在代码的不同部分检查了许多条件。 "隐藏"所有条件，然后"显示"适用的条件似乎比很多if/else语句更不繁琐。 - bbrally