第二次'show'后Bootstrap工具提示消失 [英] Bootstrap tooltip disappears after second 'show'

问题描述

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

I want to produce a manual tooltip based upon some user input. The easiest way was to hide all tooltips and then show the relevent ones.

我已将代码减少到最基本的工具提示，并且我的工具提示在第二步之后不断消失show。

I've reduced my code down to the bare essentials, and my tooltip keeps disappearing after the second "show".

我正在使用bootstrap 3.3.4和jquery 2.1.3

I'm using bootstrap 3.3.4 and jquery 2.1.3

是否有在隐藏之后立即做一个节目的问题或我在我的代码中遗漏了什么？

Is there a problem with doing a show immediatly after a hide or am I missing something in my code?

<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/

Here's a jsfiddle: https://jsfiddle.net/bbrally/4b9g0abh/

推荐答案

你'在隐藏事件发生和显示事件发生之间经历一场竞争条件。根据文档，隐藏/显示事件实际上会在隐藏/显示事件触发之前返回给调用者。

You're experiencing a race condition between when the "hide" event happens and when the "show" event happens. Per the documentation the "hide/show" events actually return to the caller before the "hidden/shown" events fire.

http://getbootstrap.com/javascript/#tooltips
向下滚动到工具提示
下的方法部分。 。回复之前工具提示实际上已隐藏 ...

...返回来电之前工具提示实际显示 ...

...Returns to the caller before the tooltip has actually been shown...

我不建议以下代码是解决方案（虽然，它可能足够好？），但可以解释您遇到的问题。具体来说，250ms的超时值会使其减慢到足以使其按预期工作。

I'm not suggesting the code below is a solution (though, it might be good enough?), but an explanation as to what you're running into. Specifically the timeout value of 250ms will slow it down enough such that it works as you're intending.

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

希望这有帮助。

这篇关于第二次'show'后Bootstrap工具提示消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！