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

我已将代码缩减为基本要素,并且在第二次“显示”后我的工具提示仍然消失.

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

解决方法:

您在“隐藏”事件发生和“显示”事件发生之间遇到了竞争条件.根据文档,“隐藏/显示”事件实际上会在“隐藏/显示”事件触发之前返回给调用者.

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

希望这可以帮助.