<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <div class="form-group"> <label>Email address</label> <input type="text" class="form-control" data-title="Please enter a value" /> </div> </div> </div>

div.form-group.has-error > .tooltip > .tooltip-inner { background-color: #F78B83; color: #912323; box-shadow: 0 0 0 1px #D95252; } div.form-group.has-error > .tooltip.in { opacity:1; } div.form-group.has-error > .tooltip.top > .tooltip-arrow { border-top-color: #F78B83; } div.form-group.has-error > .tooltip.right > .tooltip-arrow { border-right-color: #F78B83; } div.form-group.has-error > .tooltip.bottom > .tooltip-arrow { border-bottom-color: #F78B83; } div.form-group.has-error > .tooltip.left > .tooltip-arrow { border-left-color: #F78B83; }

$(document).ready(function(){ $('[data-title]').tooltip({ placement: 'top auto', trigger: 'manual' }); $('input').on('change', function(){ var hasValue = $(this).val(); var $div = $(this).closest('div.form-group'); if(hasValue){ $(this).one('hidden.bs.tooltip', function(){ $div.removeClass('has-error'); }); } else { $div.addClass('has-error'); } $(this).tooltip(hasValue ? 'hide' : 'show'); }); window.setTimeout(function(){ $('input').trigger('change'); }, 1000); });