JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
		<form data-toggle="validator" role="form" class='containter'>    
		  <div class="form-group">
		    <label for="inputTwitter" class="control-label">Twitter</label>
		    <div class="input-group">
		      <span class="input-group-addon">@</span>
		      <input type="text" data-toggle="tooltip" data-placement="bottom" data-original-title="Do it here..." pattern="^([_A-z0-9]){3,}$" maxlength="20" class="form-control" id="inputTwitter"  placeholder="1000hz" required>
		    </div>
		  </div>
		  <div class="form-group">
		    <input type="submit" value="Check Form">
		  </div>
		</form>

JavaScript

$(function () {
  $('[data-toggle="tooltip"]').tooltip({
  	trigger: 'hover focus'
  });
  
  $('#inputTwitter').on('keydown', function(){
  	var newValue = 'This is a new message';
 		$(this).attr('data-original-title', newValue)
          .tooltip('fixTitle')
          .tooltip('show');
  });
  
})