如何在输入元素上使用Bootstrap工具提示？

Question

我不是百分之百确定这是可能的,因为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'});

而且它们似乎都没有用.我最终想手动触发它,但这是第一步.有人知道解决方案吗？有可能吗？谢谢.

Answer 1

尝试为工具提示指定"title"参数.喜欢:

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

顺便说一句,具有"rel"属性的输入元素没有错.

Answer 2

如果有人想知道所有文本框的更多通用工具提示选项

$(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">