Bootstrap的工具提示会将表单元格移动到悬停状态 [英] Bootstrap's tooltip moves table cells to right a bit on hover

问题描述

我为我的项目使用Bootstrap 3.1.1。我表格中的每个单元格都包含 000 或 111 等数据。悬停时，我想将这些数据显示为工具提示。到目前为止，这是有效的。但是，当我将鼠标悬停在< td> 时，所有相邻的单元格都会向右移动。

这是我的JSFiddle

 < table class =table> 
< thead> 
< tr> 
 & nbsp; 
< / th> 
  data-toggle =tooltipdata-placement =bottomtitle => 
 P $ 1 
< / th> 
  data-toggle =tooltipdata-placement =bottomtitle => 
 P $ 2 
< / th> 
  data-placement =bottomtitle => 
 P $ 3 
< / th> 
  data-toggle =tooltipdata-placement =bottomtitle => 
 P $ 4 
< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr> 
  title => 
¹1 
< / th> 
< td data-original-title =666
 data-toggle =tooltipdata-placement =bottomtitle => 
& nbsp; 
< / td> 
< td data-original-title =777
 data-toggle =tooltipdata-placement =bottomtitle => 
& nbsp; 
< / td> 
< td data-original-title =888
 data-toggle =tooltipdata-placement =bottomtitle => 
& nbsp; 
< / td> 
< td data-original-title =999
 data-toggle =tooltipdata-placement =bottomtitle => 
& nbsp; 
< / td> 
< / tr> 
< tr> 
  data-placement =bottomtitle => 
ÖÇ2
< / th> 
< td data-original-title =aaa
 data-toggle =tooltipdata-placement =bottomtitle => 
& nbsp; 
< / td> 
< td data-original-title =bbb
 data-toggle =tooltipdata-placement =bottomtitle => 
& nbsp; 
< / td> 
< td data-original-title =ccc
 data-toggle =tooltipdata-placement =bottomtitle => 
& nbsp; 
< / td> 
< td data-original-title =ddd
 data-toggle =tooltipdata-placement =bottomtitle => 
& nbsp; 
< / td> 
< / tr> 
< tr> 
< th data-original-title =eeedata-toggle =tooltipdata-placement =bottom
 title => 
ÖÇ3
< / th> 
< td data-original-title =fff
 data-toggle =tooltipdata-placement =bottomtitle => 
& nbsp; 
< / td> 
< td data-original-title =ggg
 data-toggle =tooltipdata-placement =bottomtitle => 
& nbsp; 
< / td> 
< td data-original-title =hhh
 data-toggle =tooltipdata-placement =bottomtitle => 
& nbsp; 
< / td> 
< td data-original-title =iii
 data-toggle =tooltipdata-placement =bottomtitle => 
& nbsp; 
< / td> 
< / tr> 
< / tbody> 
< / table> 
  

解决方案

您必须添加 data-container =body根据文档。

 < td data-original-title =999data-container =body
 data-toggle =tooltipdata-placement =bottomtitle => 
& nbsp; 
< / td> 
  

http： //jsfiddle.net/uEqF2/2/

I am using Bootstrap 3.1.1 for my project. Each cell in my table contains data like 000 or 111. On hover, I want to display this data as a tooltip. So far, this works. However, when I hover over a <td>, all adjacent cells shift to the right.

Here's my JSFiddle

<table class="table">
    <thead>
        <tr>
            <th class="matrisHeader">
                &nbsp;
            </th>
            <th data-original-title="111"
                data-toggle="tooltip" data-placement="bottom" title="">
                PÇ1
            </th>
            <th data-original-title="222"
                data-toggle="tooltip" data-placement="bottom" title="">
                PÇ2
            </th>
            <th data-original-title="333" data-toggle="tooltip"
                data-placement="bottom" title="">
                PÇ3
            </th>
            <th data-original-title="444"
                data-toggle="tooltip" data-placement="bottom"title="">
                PÇ4
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th data-original-title="555" data-toggle="tooltip" data-placement="bottom"
                 title="">
                ÖÇ1
            </th>
            <td data-original-title="666"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
            <td data-original-title="777"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
            <td data-original-title="888"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
            <td data-original-title="999"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
        </tr>
        <tr>
            <th data-original-title="000" data-toggle="tooltip"
                data-placement="bottom" title="">
                ÖÇ2
            </th>
            <td data-original-title="aaa"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
            <td data-original-title="bbb"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
            <td data-original-title="ccc"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
            <td data-original-title="ddd"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
        </tr>
        <tr>
            <th data-original-title="eee" data-toggle="tooltip" data-placement="bottom"
                title="">
                ÖÇ3
            </th>
            <td data-original-title="fff"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
            <td data-original-title="ggg"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
            <td data-original-title="hhh"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
            <td data-original-title="iii"
                data-toggle="tooltip" data-placement="bottom" title="">
                &nbsp;
            </td>
        </tr>
    </tbody>
</table>

解决方案

You have to add the data-container="body" as per documentation.

<td data-original-title="999" data-container="body"
 data-toggle="tooltip" data-placement="bottom" title="">
 &nbsp;
</td>

http://jsfiddle.net/uEqF2/2/

这篇关于Bootstrap的工具提示会将表单元格移动到悬停状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！