2013-04-18 15 views
9

Ja używam podpowiedź w mojej aplikacji Rails, ale to nie działa na polu wejściowym jak mój kod jest:Bootstrap Etykietka nie działa na polu wprowadzania

%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'}); 
    }); 

Używam również:

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

Its nie działa dla pola wejściowego, ale dla etykiety działa dobrze. w jaki sposób mogę uzyskać użyteczną podpowiedź dla pola wejściowego?

+1

Jak wygląda wygenerowany znacznik? – epascarello

Odpowiedz

25

Oto prawidłowych znaczników HTML dla podpowiedzi:

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

A oto jQuery z prawej umieszczenia na podpowiedzi i spust na ostrości:

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

Always look at official docs.

I tu jest demo pracy: http://jsfiddle.net/N9vN8/69/

+0

Dzięki za odpowiedź @Miljan. Już sprawdzam ten kod i oficjalne dokumenty, ale to nie działa dla mnie. Ale jeśli użyję "data-original-title" zamiast "title" oraz w pliku .js $ ("[rel = tooltip]"). Tooltip ({trigger: "focus"});) Jego działanie. Nie wiem, dlaczego powyższy kod nie działa? – Rajeev

+0

@rubydev, Twitter Bootstrap używa HTML5 atrybutu "data" (dokładniej starsze wersje używały 'data-original-title'), więc musisz używać atrybutów danych w taki czy inny sposób. Drugi sposób jest jak w moim rozwiązaniu. Ale nie jestem pewien co do atrybutu 'rel' w tagu wejściowym, jak w twoim przypadku, myślę, że nie jest to semantyczne. Z tego powodu uniknąłem tego i użyłem 'przełącznika danych', a następnie w js można użyć dowolnego selektora (klasa, identyfikator, nazwa wejścia) ... –

1

Jest prostszy, aby włączyć go do wszystkich wejść lub glyphicons gdzie chcesz korzystać z podpowiedzi poprzez wpisanie następujący skrypt:

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

Wewnątrz wejście :

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

Wewnątrz glyphicon:

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

W ten sposób nie musisz się martwić o żadne identyfikatory podczas korzystania z podpowiedzi w kilku nakładach w tej samej formie.

Źródło: docs.

Powiązane problemy