UIテーブル内のブートストラップのツールチップがすべて右端に移動します

Question

UIブートストラップを使用することで問題はほとんどありません。 ツールチップを使用します。しかし、私は私のTD要素にツールチップを置く。そして、ツールチップに表示されるようにカーソルを移動しますが、ホバリングされたセルの右側にある同じ行のすべてのものが右に移動します。

<table class="table"> 
     <tr> 
      <th></th> 
      <th ng-repeat="jr in Jours">{{jr.jour}}</th> 
     </tr> 
     <tr ng-repeat="horaire in triPlan(planning)"> 

       <td>{{heurePlanning[horaire.id[0]]}}</td> 
       <td class="abraca" ng-click="selectHoraire(horaire)" 
       ng-repeat="rdv in horaire.rdvs" 
       tooltip-popup-delay='1000' 
       tooltip-placement="top" 
       uib-tooltip="{{rdv.nom+' a l\'âge : '+rdv.age+' et vient pour : '+rdv.text}}">{{rdv.nom}}</td> 
      </div> 
     </tr> 

    </table> 

私はこの入れてみました：data-container="body"を、それは動作しません。 私はツールチップクラスを作ろうとしましたが、CSSではz-indexおよび/またはposition: absoluteを入れました。 しかし、何も動作しません。 ツールチップが右にテーブルを移動させないようにします。 誰かがすでにこの問題を抱えていて解決策を見つけましたか？

Answer 1

これはブートストラップv3.xの既存の問題です。ツールチップ自体はdiv要素であり、tdで使用されるときにはテーブルレイアウトが分割されます。

また、trのdivの予期しない終了タグがあります。同様のthread

のおかげ

<tr ng-repeat="horaire in triPlan(planning)"> 
 
    <td>{{heurePlanning[horaire.id[0]]}}</td> 
 
    <td> 
 
     <div class="abraca" ng-click="selectHoraire(horaire)" 
 
      ng-repeat="rdv in horaire.rdvs" 
 
      tooltip-popup-delay='1000' 
 
      tooltip-placement="top" 
 
      uib-tooltip="{{rdv.nom+' a l\'âge : '+rdv.age+' et vient pour : '+rdv.text}}">{{rdv.nom}} 
 
     </div> 
 
    </td> 
 
</tr>

：

ソリューションがTD後の使用のdiv要素である第一にそれを削除します