UI Bootstrap tooltip in a table moves everything on the right

问题

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>

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 ?

回答1:

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.

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

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>

Thanks to similar thread

来源：https://stackoverflow.com/questions/43916732/ui-bootstrap-tooltip-in-a-table-moves-everything-on-the-right