Всплывающая подсказка Bootstrap исчезает после второго «шоу»

Question

Я хочу создать ручную всплывающую подсказку, основанную на некотором пользовательском вводе. Самый простой способ - скрыть все всплывающие подсказки, а затем показать соответствующие.

Я уменьшил свой код до простых предметов, и моя всплывающая подсказка продолжает исчезать после второго «шоу».

Я использую самозагрузки 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

Вы испытываете условие гонки между тем, когда происходит событие «скрыть» и когда происходит событие «показать». По документам события «скрыть/показать» действительно возвращаются к вызывающему абоненту до того, как загорится «скрытый/показанный».

http://getbootstrap.com/javascript/#tooltips Прокрутите вниз до раздела «Методы» под подсказках ... возврат к вызывающему перед тем Тултип фактически были скрыты ...

... Возврат к вызывающему Перед Тултип на самом деле было показано ...

Я не предлагаю ниже код является решением (хотя, это может быть достаточно хорошо?), но explanati о том, к чему вы клоните. В частности, значение тайм-аута 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); 
     } 
    }); 

Надеюсь, что это поможет.

Answer 2

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

Он пытался скрыть, даже если она не должна разделять оба случая.