Question

我有工具提示，当用户输入的数字不在允许范围内时会发出警告。

一切正常，但唯一的问题是工具提示的闪烁，因为我输入它闪烁，如果我长按一个数字，我甚至不会看到工具提示。

所以无论如何要解决这个问题？

<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

请检查以下fiddle。

我认为你正在寻找这种行为。

// 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（）{.....

键入时工具提示闪烁

2 个答案: