Question

我正在使用bootstrap。我想在工作提示中将一个glyphicon放在表单文本中。我可以将glyphicon放在表单文本的右侧，但工具提示不起作用。

任何想法？

这是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;
}

Answer 1

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

工具提示不会自行显示，您必须初始化它们。这是documentation

中的模糊

出于性能原因，Tooltip和Popover data-apis是选择加入的，意思是你必须自己初始化它们。

要初始化它们，请按照下面的JS片段进行操作。

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

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

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

请参阅正在运行example here (fiddle)

<强> JS

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

如何在表单中放置带有工具提示的glyphicon

1 个答案: