Question

我不是100％确定这是可能的，因为input没有rel属性（Bootstrap网站上的示例仅显示rel="tooltip"的1个示例），但我认为它应该有用。

这是我的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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

Boostrap 3和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。

Answer 4

这对于那些拥有多个输入字段的用户可能非常有用，因此您最终不会调用多个工具提示（），

这样做，这是基于输入字段的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 });
});

希望有所帮助：）

Answer 5

在任何地方启用工具提示

初始化页面上所有工具提示的一种方法是通过它们的 data-bs-toggle 属性选择它们：

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

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

5 个答案: