定位在子元素上的引导工具提示答案

【问题标题】：Bootstrap tooltip positioned on a child element定位在子元素上的引导工具提示
【发布时间】：2016-03-04 17:14:15
【问题描述】：

我有一个这样的引导工具提示 (fiddle)：

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

我希望它与里面的图标对齐，但我想在不将弹出框移动到图标元素上的情况下实现这一点，因为工具提示信息的语义属于跨度。

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

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

【问题讨论】：

你可以使用.tooltip {margin-left: -50px;}，在javascript中或使用一些css技巧来计算跨度的实际1/2宽度......

标签： javascript css twitter-bootstrap tooltip

【解决方案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/

【讨论】：

不是我真正想要的，因为孩子或父母可以有填充，边距，例如也不能使用 data-placement-right。