引导工具提示未显示上下文颜色答案

【问题标题】：bootstrap tooltip not showing context color引导工具提示未显示上下文颜色
【发布时间】：2017-11-03 12:56:01
【问题描述】：

我遇到了一个问题，我的工具提示没有显示在我的数据表上。我通过添加data-container='body' 作为属性（如here 所述）解决了这个问题，它现在显示了完整的工具提示，但产生了一个新问题；它会删除工具提示的上下文。

例如：

<div class="text-info tooltip-info" 
     data-rel="tooltip" 
     data-html="true" 
     data-original-title="     
       <div class=&quot;text-left&quot;>         
          <i><b>Commercial decision:</b> <br> </i> <br>          
          <i><b>Technical decision:</b> <br> </i> <br>       
          <i><b>Overall decision:</b> <br> </i>     
       </div>" 
     style="font-weight: bold;overflow: auto;">
     Pending
</div>

产量：

它没有显示在数据表的顶部，但确实有正确的上下文。

添加data-container='body' 产生：

正确显示但不显示任何上下文。

如何在保留所需上下文的同时正确显示工具提示？

【问题讨论】：

测试用例会大大增加你得到答案的机会。
这里缺少哪些您一直在寻找的上下文？
正如@ochi 提到的，小提琴会很有用。您是否尝试过检查浏览器控制台中的工具提示（右键单击它然后检查）以查看不同工具提示使用您设置的不同容器选项获得哪些类。从那里，您应该能够看到为什么颜色不是您所期望的，并从那里更新您的 CSS（或向工具提示动态添加类）。

标签： html twitter-bootstrap twitter-bootstrap-3 datatables

【解决方案1】：

我希望这能解决您的问题。如果没有，那么我也想问你的代码。这样就很容易检查了。

$('[data-toggle="tooltip"]').tooltip();

.parent-container {
  width: fit-content;
  position: relative;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="parent-container"><div class="" data-toggle="tooltip"  data-placement="right" data-container=".parent-container" data-html="true" title="     
       <div class=&quot;text-left&quot;>         
          <i><b>Commercial decision:</b> <br> </i> <br>          
          <i><b>Technical decision:</b> <br> </i> <br>       
          <i><b>Overall decision:</b> <br> </i>     
       </div>" 
     style="font-weight: bold;overflow: auto;">
  Pendings
</div></div>

【讨论】：