41

我不是 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'});

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

4

6 回答 6

75

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

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

顺便说一句，具有“rel”属性的输入元素没有错。

于 2012-04-29T12:12:42.150 回答
13

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

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

于 2014-03-20T23:37:38.957 回答
4

Boostrap 3 and 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 title property is set without the need of the rel attribute.

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;
}
于 2017-10-11T13:16:13.783 回答
3

This may be useful for those having multiple input fields, so you don't end up calling several tooltip(),

Just do this, this is based on ID of input field, you could have it to work as class too;

$('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 :)

于 2015-04-28T09:37:58.603 回答
0

Enable tooltips everywhere

One way to initialize all tooltips on a page would be to select them by their data-bs-toggle attribute:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})
于 2021-05-22T08:34:43.350 回答
0

Why not use data-toggle attribute as a trigger a tooltip if present?

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

于 2021-10-25T01:09:40.570 回答