JSFiddle - React, Tailwind, and code Playground

by bhatnagar018

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="row">
  <label for="labelinput">Win Chance</label>
  <input type="number" class="form-control" id="chance" min="10" max="90" step="any" value="50">
</div>

CSS

body {
  margin: 30px;
}

.row {
  display: flex;
  flex-direction: row;
  width: 300px;
}


}
#chance {
  width: 300px
}

JavaScript

// 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 optinal 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');
          }

        });