如何将带有工具提示的字形图标放入表单中答案

【问题标题】：How to put a glyphicon with tooltip inside a form如何将带有工具提示的字形图标放入表单中
【发布时间】：2016-01-28 14:29:07
【问题描述】：

我正在使用引导程序。我想在带有工具提示的表单文本中放置一个字形图标。我可以将字形图标放在表单文本的右侧，但工具提示不起作用。

有什么想法吗？

这是html

<div class="right-inner-addon table-error">
  <a>
    <i class="glyphicon glyphicon-exclamation-sign red" data-toggle="tooltip" title="Campo obrigatório."></i>
    <input class="form-control" type="text"/>
  </a>
</div>

还有我的css

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;    
}
.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 8px 10px;
    pointer-events: none;
}

【问题讨论】：

你能加个JSFiddle
工具提示不会自行显示，您必须对其进行初始化。请参阅下面的答案
是的，我知道。也许我没有正确解释。我想要这样的东西：jsfiddle.net/pfrutuoso/n9eu89et/4
查看我更新的答案，您有一个 CSS 属性可以防止工具提示出现...包含的小提琴示例显示它有效:)
如果问题解决了您的问题，请不要忘记将问题标记为已回答

标签： html css forms twitter-bootstrap glyphicons

【解决方案1】：

重新阅读您的问题，所以这里有一个更新。

工具提示不会自行显示，您必须对其进行初始化。这是他们documentation中的简介

出于性能原因，Tooltip 和 Popover data-apis 是可选的，这意味着您必须自己初始化它们。

要初始化它们，请按照下面的 JS sn-p。

另外，您的代码具有 CSS 属性：

.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 8px 10px;
    /* pointer-events: none;  <!-- remove this line */
}

您需要将其删除，因为这会阻止触发工具提示。您还需要指定 data-placement 属性（右、左等），因为它丢失了。

查看运行example here (fiddle)

$(function () {
    $('[data-toggle="tooltip"]').tooltip({
        'html': true
    })
});

【讨论】：