The balloon tooltip disappears after the second "show"
I want to create a manual tooltip based on some user input. The easiest way is to hide all tooltips and then show relevant ones.
I have cut my code down to the simplest things, and my tooltip keeps disappearing after the second "show".
I am using bootstrap 3.3.4 and jquery 2.1.3
Is there a problem with doing the show right after 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>
Here's a jsfiddle: https://jsfiddle.net/bbrally/4b9g0abh/
source to share
You are experiencing a race condition between when the "hide" event occurs and when the "show" event occurs. According to the documentation, "hide / show" events are actually returned to the caller before the "hidden / shown" fire is fired.
http://getbootstrap.com/javascript/#tooltips Scroll down to the Methods section under the tooltips ... Returns to the caller until the tooltip is actually hidden ...
... Returns to the caller until the tooltip shows...
I am not suggesting that the code below be a solution (although it might have been good enough?), But an explanation of what you are using. Specifically, a timeout value of 250ms will slow it down so much that it works as you plan.
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);
}
});
Hope it helps.
source to share