Question

我有一个文本框，允许输入最多40个字符。当用户尝试输入第41个字符时，我需要显示引导工具提示（不是焦点或悬停）。我正在努力，而不是能够做到。请帮助。我也为此创建了JsFiddle

$(document).ready(function(){
 $('#textBox').keyup(function() {
  var text_length = $('#textBox').val().length;
    if(text_length ==40) {
    $('#textBox').attr('title','you cannot enter more than 40 characters');
    $('input[rel="txtTooltip"]').tooltip();
    }
    });    
});

Answer 1

您需要将工具提示trigger设置为manual，即data-trigger="manual"，然后通过tooltip('show')手动显示工具提示。除此之外，我认为keydown对于此任务来说是一个更好的事件 - 工具提示应该在用户点击键盘时出现，而不是在用户停止输入时出现。我还建议您实现一些逻辑以防止工具提示闪烁或重新出现（如果已经显示）。

$('#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);                  
       }    
   }
});

分叉小提琴 - ＆gt;的 http://jsfiddle.net/hb3bmo50/

Bootstrap工具提示超出文本框maxlength

1 个答案: