jQuery 如何在输入元素上使用 Bootstrap 工具提示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10371948/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use Bootstrap tooltip on input elements?
提问by Loolooii
I'm not 100% sure this is at all possible, because inputdoesn't have a relattribute (the example on the Bootstrap website shows only 1 example with rel="tooltip"), but I think it should work.
我不是 100% 确定这是可能的，因为input它没有rel属性（Bootstrap 网站上的示例仅显示 1 个带有 的示例rel="tooltip"），但我认为它应该可以工作。
This is my HTML:
这是我的 HTML：
<input id="password" type="password" />
And this is how I try to trigger it:
这就是我尝试触发它的方式：
$(document).ready(function () {
$('input[id=password]').tooltip({'trigger':'focus'});
});
And I also tried this:
我也试过这个：
$('#password').tooltip({'trigger':'focus'});
And none of them seem to work. I eventually want to trigger it manually, but this is the first step. Does anybody know a solution for this? Is it possible at all? Thanks.
它们似乎都不起作用。我最终想手动触发它，但这是第一步。有人知道解决方案吗？有可能吗？谢谢。
回答by daeq
Try to specify "title" parameter to tooltip. Like:
尝试为工具提示指定“title”参数。喜欢：
$('#password').tooltip({'trigger':'focus', 'title': 'Password tooltip'});
Btw, that's nothing wrong with input element having "rel" attribute.
顺便说一句，具有“rel”属性的输入元素并没有错。
回答by Senthil
In case anyone wants to know more generic tooltip option for the all the text boxes
如果有人想知道所有文本框的更多通用工具提示选项
$(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">回答by c-chavez
Boostrap 3 and 4
助推器 3 和 4
Based on @Senthil's response, and using bootstrap 3.x or 4.x and JQuery, this will set tooltips for all input elements as long as the titleproperty is set without the need of the relattribute.
基于@Senthil 的响应，并使用 bootstrap 3.x 或 4.x 和 JQuery，只要title在不需要属性的情况下设置属性，这将为所有输入元素设置工具提示rel。
HTML:
HTML：
<input class="form-control" id="inputTestID" name="inputTest" placeholder="Test" type="text" data-placement="bottom" title="Tooltip Text">
Javascript:
Javascript：
$(document).ready(function(){
$('input').tooltip();
});
CSS:
CSS：
.tooltip-inner {
background-color: #fff;
color: #000;
border: 1px solid #000;
}
回答by ZAD
This may be useful for those having multiple input fields, so you don't end up calling several tooltip(),
这对于具有多个输入字段的人可能很有用，因此您最终不会调用多个 tooltip()，
Just do this, this is based on ID of input field, you could have it to work as class too;
这样做，这是基于输入字段的ID，你也可以让它作为类工作；
$('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 });
});
Hope it helps :)
希望能帮助到你 ：）
