Come utilizzare la descrizione comando Bootstrap sugli elementi di input?

Question

Non sono sicuro al 100% che tutto ciò sia possibile, perché input non ha un attributo rel (l'esempio sul sito Web Bootstrap mostra solo un esempio con rel="tooltip"), ma penso che dovrebbe funzionare.

Questo è il mio HTML:

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

e questo è come provo a innescare:

$(document).ready(function() { 

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

E ho anche provato questo:

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

E nessuno di loro sembra funzionare. Alla fine voglio attivarlo manualmente, ma questo è il primo passo. Qualcuno conosce una soluzione per questo? È possibile a tutti? Grazie.

Answer 1

Provare a specificare il parametro "titolo" come suggerimento. Come:

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

Btw, non c'è niente di sbagliato con l'elemento di input con attributo "rel".

Answer 2

Nel caso in cui qualcuno vuole sapere opzione tooltip più generico per le tutte le caselle di testo

<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

Questo può essere utile per coloro che hanno più campi di input, in modo da non finire per chiamare diversi tooltip() ,

Basta fare questo, questo si basa sull'ID del campo di input, potresti farlo funzionare anche come classe;

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

Speranza che aiuta :)

Answer 4

Sulla base @ risposta di Senthil, e utilizzando 3.x bootstrap e JQuery, questo imposterà i suggerimenti per tutti gli elementi di input fino a quando la proprietà "titolo" è impostato senza la necessità dell'attributo "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.