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

Question

我不是 100% 确定这完全可能，因为 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

尝试为工具提示指定“标题”参数。喜欢：

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

Answer 3

Boostrap 3 和 4

基于@Senthil 的响应，并使用引导程序 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

这可能对那些有多个输入字段的人有用，因此您最终不会调用多个 tooltip()，

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

Answer 6

如果存在，为什么不使用 data-toggle 属性作为触发工具提示？

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip()
})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>