lolka_bolka lolka_bolka - 1 year ago 94
jQuery Question

Bootstrap tooltip stuck on disabled

I have some problems with Bootstrap tooltips.

I have a button, what has


If I type some text into the input, and the value of input is not empty, then I enable the button.

When I push the button, I saving the data through ajax, empty the value of the input and disable the button again. All these things are works perfectly.

The only problem is that the tooltip has stuck for some reason, and I don't know why.

I tried to enable / disable the tooltips through jQuery, but it does not helps.
I've added this on keyup / click, but does not works.

$('data-toggle="tooltip"]').tooltip('disable') // Disable tooltips
$('data-toggle="tooltip"]').tooltip('enable') // Re enable

Here is a jsFiddle


<form class="form-horizontal">
<div class="form-group">
<label for="in" class="col-sm-3">The label</label>
<div class="col-sm-9">
<input class="form-control" type="text" id="in">
<input id="myBtn" class="btn btn-default" type="button" value="This is a button" disabled="disabled" data-toggle="tooltip" data-placement="right" title="This is a tooltip">



$('#in').keyup(function() {
if ($(this).val() !== '') {
$('#myBtn').prop('disabled', false);
} else {
$('#myBtn').prop('disabled', true);

$('#myBtn').click(function() {
$(this).prop('disabled', true);

Answer Source

Add this line to your buttons click event - $(this).tooltip('hide');

      $('#myBtn').click(function () {
            $(this).prop('disabled', true);