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

【问题标题】：UI Bootstrap tooltip in a table moves everything on the right表格中的 UI Bootstrap 工具提示将所有内容移动到右侧
【发布时间】：2017-10-10 12:49:01
【问题描述】：

我在使用 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。但没有任何效果。我希望工具提示不会使表格向右移动.. 是否有人已经遇到此问题并找到了解决方案？

【问题讨论】：

标签： angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案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

【讨论】：