Вопрос по twitter-bootstrap, jquery, html – Как использовать всплывающую подсказку Bootstrap для элементов ввода?

33

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

Это мой HTML:

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

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

<code>$(document).ready(function () {

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

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

<code>$('#password').tooltip({'trigger':'focus'});
</code>

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

Ваш Ответ

4   ответа
3

Boostrap 3 and 4

Основываясь на ответе @ Senthil и используя bootstrap 3.x или 4.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;
}
Bootstrap 3 Fiddle. Bootstrap 4 Fiddle.
12

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

$(document).ready(function() {
  $('input[rel="txtTooltip"]').tooltip();
});
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" rel="txtTooltip" title="**Your Title**" data-toggle="tooltip" data-placement="bottom">

63

заголовок & quot; параметр для всплывающей подсказки. Подобно:

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

Кстати, в этом нет ничего плохого, если элемент ввода имеет значение «rel». приписывать.

На самом деле,rel атрибуты не действительны дляinput поля.w3schools.com/tags/tag_input.asp
@ChristianNikkanen: Это может быть правдой, но в данном конкретном случае это не так.w3.org/TR/html401/interact/forms.html#h-17.4 не перечисляетrel как атрибут.w3.org/TR/html4/struct/links.html#adef-rel говорит, что это "описывает отношение из текущего документа к якору, указанномуhref атрибут & Quot. И с тех порinput не имеетhrefЯ пришел к выводу, что это не действительно.
hover focus тоже по умолчанию, так что вам может не потребоваться устанавливать это свойство. Также, вероятно, стоит отметить, что вы должны включить'container': 'body' как собственность, если вы работаете в.btn-group или же.input-group увидетьTooltips in button groups and input groups require special settings.
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 });
});

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

Похожие вопросы