Bootstrap tooltip on exceeding textbox maxlength -
i have textbox allows maximum of 40 characters entered.when user tries enter 41th character ,i need display bootstrap tooltip (not on focus or hover).i struggling , not able it.please help. have created jsfiddle that
http://jsfiddle.net/vijay4225/gjlusomk/
$(document).ready(function(){ $('#textbox').keyup(function() { var text_length = $('#textbox').val().length; if(text_length ==40) { $('#textbox').attr('title','you cannot enter more 40 characters'); $('input[rel="txttooltip"]').tooltip(); } }); });
you need set tooltip trigger
manual
, i.e data-trigger="manual"
, show tooltip manually tooltip('show')
. besides that, think keydown
better event task - tooltip should appear user hits keybord, not when user has stopped typing. suggest implement logic prevent tooltip blinking or reappear if shown.
$('#textbox').keydown(function() { if ($(this).val().length>=40) { if ($(this).data('warning')) return; $(this).attr('title','you cannot enter more 40 characters'); $(this).tooltip('show'); $(this).data('warning', true); } else { if ($(this).data('warning')) { $(this).tooltip('hide'); $(this).data('warning', false); } } });
forked fiddle -> http://jsfiddle.net/hb3bmo50/
Comments
Post a Comment