我在用bootstrap。我想在带有工具提示的表单文本中放置一个字形图标。我可以将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;
}
最佳答案
重新阅读你的问题,这里有一个更新。
工具提示本身不会显示,您必须初始化它们。以下是他们documentation中的简介
出于性能原因,工具提示和Popover数据api是可选的,
意思是你必须自己初始化它们。
要初始化它们,请遵循下面的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
})
});