angularjs - 表格中的 UI Bootstrap 工具提示将所有内容移动到右侧

Question

通过使用 UI Bootstrap，我几乎没有遇到什么问题。我想使用工具提示。但是当我将工具提示放在我的 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

这是 bootstrap v3.x 中存在的问题。 Tooltip 本身是 div 元素，当它在 td 中使用时，它会破坏表格布局。

此外，您在 tr 中有意外的 div 结束标记。先把它去掉

解决方案是在 td 之后使用 div:

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

感谢类似thread