bootstrap工具提示不显示上下文颜色

Question

我遇到了一个问题，我的工具提示没有显示在我的数据表之上。 我通过添加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'会产生：

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

如何在保留我想要的上下文的同时正确显示工具提示？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;