JSFiddle - React, Tailwind, and code Playground

by Rajshekar Reddy

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" pattern="^([_A-z0-9]){3,}$" maxlength="20" class="form-control" data-title="Custom Title" title="Do it here.." id="inputTwitter" placeholder="1000hz" required>
		    </div>
		  </div>
		  <div class="form-group">
		    <input type="submit" value="Check Form">
		  </div>
		</form>

JavaScript

$(function () {
  $('#inputTwitter').parent().tooltip({
   title : $('#inputTwitter').data('title')
  });
})