Bootstrap Tooltip không làm việc trên lĩnh vực đầu vào

Question

I, đang sử dụng tooltip trong ứng dụng Rails của tôi, nhưng nó không làm việc trên lĩnh vực đầu vào như mã của tôi là:

%input#main-search{:name => "query", :placeholder => "search all 
    items", :rel => "tooltip", :title => "Search All Items", :type => "text"} 
    :javascript 
    $(document).ready(function(){ 
     $('input[title]').tooltip({placement:'bottom'}); 
    }); 

tôi cũng sử dụng:

$('#main-search').tooltip({'trigger':'focus'}); 

của nó không hoạt động cho trường nhập nhưng đối với nhãn nó hoạt động tốt. làm thế nào tôi có thể in tooltip cho lĩnh vực đầu vào?

Answer 1

Dưới đây là đoạn mã HTML hợp lệ cho tooltip:

<input data-toggle="tooltip" title="tooltip on second input!" type="text" placeholder="Focus me!" name="secondname"/> 

Và đây là jQuery với vị trí phù hợp với tooltip và kích hoạt trên tập trung:

$('input[type=text][name=secondname]').tooltip({ /*or use any other selector, class, ID*/ 
    placement: "right", 
    trigger: "focus" 
}); 

Always look at official docs.

Và đây là bản demo làm việc: http://jsfiddle.net/N9vN8/69/

Answer 2

Nó là đơn giản để kích hoạt nó cho tất cả nguyên liệu đầu vào hoặc glyphicons nơi bạn muốn sử dụng một tooltip bằng cách chỉ cần gõ lệnh sau:

<script type="text/javascript"> 
$(function() { 
       $('[data-toggle="tooltip"]').tooltip() 
      }); 
</script> 

Bên trong một đầu vào :

<input data-toggle="tooltip" data-placement="left" title="Your awesome tip!" type='text' class="form-control" name="name" placeholder="placeholder" maxlength="10"/> 

Bên trong một glyphicon:

<span class="glyphicon glyphicon-calendar" data-toggle="tooltip" data-placement="right" title="Open calendar"></span> 

Bằng cách này bạn không cần phải lo lắng về bất kỳ ID nào khi sử dụng chú giải công cụ trong một số yếu tố đầu vào trong cùng một biểu mẫu.

Nguồn: docs.