Jak używać etykiety narzędzi Bootstrap na elementach wejściowych?

Question

Nie jestem w 100% pewien, że jest to w ogóle możliwe, ponieważ input nie ma atrybutu rel (przykład na stronie Bootstrap pokazuje tylko 1 przykład z rel="tooltip"), ale myślę, że powinien działać.

To jest mój HTML:

<input id="password" type="password" /> 

I tak staram się go wywołać:

$(document).ready(function() { 

    $('input[id=password]').tooltip({'trigger':'focus'}); 
}); 

Próbowałem też tak:

$('#password').tooltip({'trigger':'focus'}); 

I żaden z nich wydaje się działać. W końcu chcę uruchomić go ręcznie, ale jest to pierwszy krok. Czy ktoś zna rozwiązanie tego problemu? Czy to w ogóle możliwe? Dzięki.

Answer 1

Spróbuj podać parametr "tytuł" do podpowiedzi. Podobnie jak:

$('#password').tooltip({'trigger':'focus', 'title': 'Password tooltip'}); 

Przy okazji, nie ma nic złego w tym, że element wejściowy ma atrybut "rel".

Answer 2

W przypadku gdy ktoś chce wiedzieć więcej rodzajowe opcję podpowiedzi dla wszystkich pól tekstowych

<input type="text" rel="txtTooltip" title="**Your Title**" data-toggle="tooltip" data-placement="bottom"> 

<script> 
$(document).ready(function(){ 
    $('input[rel="txtTooltip"]').tooltip(); 
}); 
</script> 

Answer 3

Może to być przydatne dla tych, którzy mają wiele pól wejściowych, więc nie kończy się wywołaniem kilka podpowiedzi() ,

Po prostu zrób to, jest to oparte na identyfikatorze pola wejściowego, możesz go również używać jako klasy;

$('input').each(function (i, e) { 
    var label; 
    switch ($(e).attr('id')) { 
     case 'input-one': 
      label = 'This is input #1'; 
      break; 
     case 'input-two': 
      label = 'This is input #2'; 
      break; 
    } 
    $(e).tooltip({ 'trigger': 'focus', 'title': label }); 
}); 

Nadzieja to pomaga :)

Answer 4

podstawie @ odpowiedź Senthil, a za pomocą startowej 3.x i jQuery, będzie to zestaw podpowiedzi dla wszystkich elementów wejściowych tak długo jak „title” właściwość jest ustawiona bez potrzeba atrybutu "rel".

HTML:

<input class="form-control" id="inputTestID" name="inputTest" placeholder="Test" type="text" data-placement="bottom" title="Tooltip Text"> 

Javascript:

$(document).ready(function(){ 
    $('input').tooltip(); 
}); 

CSS:

.tooltip-inner { 
     background-color: #fff; 
     color: #000; 
     border: 1px solid #000; 
    } 

Fiddle HERE.