Как использовать подсказку Bootstrap для элементов ввода?

Я не уверен на 100%, что это вообще возможно, потому что input не имеет атрибута rel (пример на сайте Bootstrap показывает только 1 пример с rel="tooltip"), но я думаю, что это должен работать.

Это мой HTML:

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

И вот как я пытаюсь вызвать его:

$(document).ready(function () {

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

И я также пробовал это:

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

И никто из них, похоже, не работает. В конечном итоге я хочу запустить его вручную, но это первый шаг. Кто-нибудь знает решение для этого? Это вообще возможно? Спасибо.

Ответы

Ответ 1

Попробуйте указать параметр "title" для всплывающей подсказки. Как:

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

Btw, что ничего плохого в том, что элемент ввода имеет атрибут rel.

Ответ 2

Если кто-то хочет узнать более общую подсказку для всех текстовых полей

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

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

Ответ 3

Это может быть полезно для тех, у кого есть несколько полей ввода, поэтому вы не вызываете несколько подсказок(),

Просто сделайте это, это основано на идентификаторе поля ввода, вы можете заставить его работать как класс,

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

Надеюсь, это поможет:)

Ответ 4

Основываясь на ответе @Senthil и используя bootstrap 3.x и JQuery, это установит всплывающие подсказки для всех входных элементов, пока свойство "title" будет установлено без необходимости атрибута 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 ЗДЕСЬ.