ブートストラップのツールチップにコンテキストカラーが表示されない

Question

私のツールチップが私のデータテーブルの上に表示されないところに問題がありました。 hereのような属性としてdata-container='body'を追加することでこれを解決しましたが、これは完全なツールチップを示していますが、新しい問題を作成します。ツールチップのコンテキストを削除します。例として

：

<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

これが問題を解決することを願っています。そうでなければあなたのコードにも尋ねたいと思います。それで簡単に検査することができます。

$('[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>