鍵入時工具提示閃爍

Question

我有工具提示，當用戶輸入不在允許范圍內的數字時會發出警告。

一切正常，但唯一的問題是工具提示閃爍，當我鍵入它時會閃爍，如果長時間按住數字，我什至看不到工具提示。

那么無論如何要解決這個問題？

DEMO

<div class="row">
<label for="labelinput">Win Chance</label>
<input type="number" class="form-control" id="chance" value="50">
</div>

JS

$( document ).ready() block.
    $( document ).ready(function() {
        $('[data-toggle="tooltip"]').tooltip();
       $('#chance').tooltip('dispose');
    });

$('#chance').attr({"data-toggle": "tooltip", "title": "WinChance must be between 10 - 90"});
  $('#chance').on('input', function() {
     if(parseFloat(this.value) > 90.00 ){        
        $('#chance').tooltip('show')
      }  else if(parseFloat(this.value) < 10.00 ) {
         $('#chance').tooltip('show')
      }
         else {
         $('#chance').tooltip('dispose');
      }
  });

Answer 1

請檢查以下小提琴 。

我認為您正在尋找這種行為。

// A $( document ).ready() block.
    $(document).ready(function() {
      $('[data-toggle="tooltip"]').tooltip();
      $('#chance').tooltip('dispose');
    });

    $('#chance').attr({
      "data-toggle": "tooltip",
      "title": "WinChance must be between 10 - 90"
    });
    $('#chance').on('input', function() {
      console.log(parseFloat(this.value));
      if (parseFloat(this.value) > 90.00 && $('div.tooltip').length === 0) {
        $('#chance').tooltip('show')
      } else if (parseFloat(this.value) < 10.00 && $('div.tooltip').length === 0) {
        $('#chance').tooltip('show')
      }
      //It's an optional condition if you want than only add else remove it.
      else if ($('div.tooltip').length && parseFloat(this.value) > 10.00 && parseFloat(this.value) < 90.00) {
        $('#chance').tooltip('dispose');
      }

    });

Answer 2

添加模糊$（'＃chance'）。on（'blur'，function（）{.....