JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<input type="text" rel="txtTooltip"  data-toggle="tooltip" data-placement="bottom" id="textBox" data-trigger="manual" maxlength="40">

JavaScript

$('#textBox').keydown(function() {
   if ($(this).val().length>=40) {
     if ($(this).data('warning')) return;
     $(this).attr('title','you cannot enter more than 40 characters');
	 $(this).tooltip('show');
     $(this).data('warning', true);
   } else {
       if ($(this).data('warning')) {
	      $(this).tooltip('hide');       
	      $(this).data('warning', false);                  
       }    
   }
});