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

问题描述

我在使用 UI Bootstrap 时遇到的问题很少.我想使用工具提示.但是当我将工具提示放在我的 TD 元素上时.然后我将其悬停，工具提示显示，但是，悬停单元格右侧同一行中的所有内容都在右侧移动更多.

 <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="horaire.rdvs 中的rdv"工具提示弹出延迟='1000'工具提示放置=顶部"uib-tooltip="{{rdv.nom+' a l\'âge : '+rdv.age+' et vient pour : '+rdv.text}}">{{rdv.nom}}</td>
</tr>

我试着这样写:data-container="body" 但它不起作用.我试图制作一个工具提示类，并在 css 中放置一个 z-index 和/或 position: absolute.但没有任何作用.我希望工具提示不会使表格向右移动..有人已经遇到过这个问题并找到了解决方案吗?

解决方案

这是 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="horaire.rdvs 中的rdv"工具提示弹出延迟='1000'工具提示放置=顶部"uib-tooltip="{{rdv.nom+' a l\'âge : '+rdv.age+' et vient pour : '+rdv.text}}">{{rdv.nom}}

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

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 ?

解决方案

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

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