ブートストラップのツールチップが無効になっている

Question

ブートストラップのツールチップに問題があります。

ボタンがありますが、これはデフォルトでdisabledです。

入力にテキストを入力し、inputの値が空でない場合は、ボタンを有効にします。

ボタンを押すと、データがajaxで保存され、入力値が空になり、もう一度ボタンが無効になります。これらのことはすべて完璧に機能しています。

唯一の問題は、何らかの理由でツールチップが詰まっていて、その理由がわからないことです。

jQueryでツールチップを有効/無効にしようとしましたが、役に立たないです。 これをkeyup/clickに追加しましたが、うまくいきません。ここで

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

は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 1

イベントをクリックして、ボタンに次の行を追加します - $(this).tooltip('hide');

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

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

     }); 

Answer 2

ここfiddle

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

更新されます。このようにしてみボタンのクリックイベントの後

Answer 3

をツールチップを非表示にする必要があります、

JS Fiddle

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