javascript - 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>

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

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

<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 重新定义 Bootstrap 工具提示类。

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/