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

你在＆＃34;隐藏＆＃34;之间经历了一场竞争。事件发生时，＆＃34;显示＆＃34;事件发生了。根据文档＆＃34;隐藏/显示＆＃34;事件实际上会在＆＃34;隐藏/显示＆＃34;之前返回给调用者。事件火灾。

http://getbootstrap.com/javascript/#tooltips 向下滚动到＆＃34;方法＆＃34;工具提示下的部分 ...返回到调用者之前工具提示实际上已隐藏 ...

...在工具提示实际显示之前>返回调用者 ...

我不建议下面的代码是一个解决方案（但是，它可能已经足够了？），但是解释了你遇到的问题。具体来说，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); } });

希望这有帮助。

Answer 2

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

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

第二次'show'后Bootstrap工具提示消失

2 个答案: