Bootstrap工具提示位于子元素上

Question

我有这样的Bootstrap工具提示（fiddle）：

<span title='Description about this' data-toggle="tooltip" data-placement="auto top">
   <i class="glyphicon glyphicon-star"></i> Some text here
</span>

我希望它与其中的图标对齐，但我想实现这一点而不将popover移动到icon元素上，因为工具提示信息的语义属于span。

这应该是它的外观，但我不想使用这个标记：

<span>
   <i class="glyphicon glyphicon-star" title='Description about this' data-toggle="tooltip" data-placement="auto top"></i>
   Some text here
</span>

Answer 1

您可以使用!important重新定义引导工具提示类。

<强> HTML ：

<div class="content">
    <span title='Description about this' data-toggle="tooltip" data-placement="auto top">
       <i class="glyphicon glyphicon-star"></i> Some text here
    </span>
</div>

<强>风格：

body{
  margin: 4em;
}
[title]{
  cursor: help;
}

.content .tooltip{
  left: 0 !important;
}

https://jsfiddle.net/cLmn9o1n/