表格中的UI Bootstrap工具提示将所有内容向右移动 [英] UI Bootstrap tooltip in a table moves everything on the right

问题描述

通过使用UI引导程序，我几乎没有问题. 我想使用工具提示.但是，当我将工具提示放到TD元素上时.然后，我将其悬停在工具提示上，但是，悬停的单元格右侧同一行中的所有东西都向右移动.

I have few problems by using the UI Bootstrap. I want to use the tooltips. But when I put the tooltip on my TD element. And then I hover it the tooltip shows but, all the things in the same row on the right of the hovered cell moves more on the right.

    <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. 但是什么都行不通. 我希望工具提示不要使表格向右移动. 有人已经遇到了这个问题并找到了解决方案吗?

I tried to put this : data-container="body" but it doesn't work. I tried to make a tooltip-class, and in the css put a z-index and/or position: absolute. But nothing works. I want that the tooltip don't make the table move on the right.. Does someone already had this problem and found a solution ?

推荐答案

这是bootstrap v3.x中存在的问题.工具提示本身就是div元素，在td中使用时，它会破坏表布局.

This is an existing problem in bootstrap v3.x. Tooltip itself is div element and when it is used in td, it breaks the table layout.

此外，tr中还有div的意外结束标记.首先将其删除

Also, you have unexpected end tag of div in tr. Remove it first

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

Solution is use div after td:

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

感谢类似的线程

这篇关于表格中的UI Bootstrap工具提示将所有内容向右移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！