如何使用引导提示输入元素？(How to use Bootstrap tooltip on inpu

我不是100％肯定这是完全可能的，因为input不具有rel属性（引导程序网站上的示例仅显示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'});

顺便说一句，这是没有错，有“相对”属性的输入元素。

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:

自举3,4

对@塞特希的反应为主，并采用引导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;
}

• 引导3小提琴 。
• 引导4小提琴 。

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 });
});

希望能帮助到你 ：）

文章来源: How to use Bootstrap tooltip on input elements?