Вопрос по twitter-bootstrap, jquery, html – Как использовать всплывающую подсказку Bootstrap для элементов ввода?
Я не уверен на 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>
И ни один из них, кажется, не работает. В конце концов я хочу запустить его вручную, но это первый шаг. Кто-нибудь знает решение для этого? Это вообще возможно? Благодарю.
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;
}
если кто-то захочет узнать более общую подсказку для всех текстовых полей
$(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">заголовок & quot; параметр для всплывающей подсказки. Подобно:
$('#password').tooltip({'trigger':'focus', 'title': 'Password tooltip'});
Кстати, в этом нет ничего плохого, если элемент ввода имеет значение «rel». приписывать.
rel атрибуты не действительны дляinput поля.w3schools.com/tags/tag_input.asp
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.
у кого есть несколько полей ввода, поэтому вы не должны вызывать несколько подсказок (),
Просто сделайте это, это основано на идентификаторе поля ввода, вы также можете использовать его как класс;
$('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 });
});
Надеюсь, поможет :)
Похожие вопросы
