lolka_bolka lolka_bolka - 6 months ago 34
jQuery Question

Bootstrap tooltip stuck on disabled

I have some problems with Bootstrap tooltips.

I have a button, what has

disabled
default.

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

HTML

<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">
</div>
<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">
</div>
</form>


jQuery

$('[data-toggle="tooltip"]').tooltip();

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

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

Answer

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

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

            $(this).tooltip('hide');

        });
Comments