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中存在的问题。工具提示本身是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

表中的UI Bootstrap工具提示会移动右侧的所有内容

1 个答案: