javascript - Tooltip flickering while typing -
i have tooltip warn when user entering number not in allowed range.
everything works fine, problem flickering of tooltip, type flickers , if hold down number long, won't see tooltip.
so anyway solve around this?
<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 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'); } });
please check following fiddle.
i think looking behavior.
// $( document ).ready() block. $(document).ready(function() { $('[data-toggle="tooltip"]').tooltip(); $('#chance').tooltip('dispose'); }); $('#chance').attr({ "data-toggle": "tooltip", "title": "winchance must 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 optional condition if want add else remove it. else if ($('div.tooltip').length && parsefloat(this.value) > 10.00 && parsefloat(this.value) < 90.00) { $('#chance').tooltip('dispose'); } });
Comments
Post a Comment