Bootstrap 的工具提示在悬停时将表格单元格向右移动一点

Posted 2023-02-22

【中文标题】Bootstrap 的工具提示在悬停时将表格单元格向右移动一点

【英文标题】：Bootstrap's tooltip moves table cells to right a bit on hover

【发布时间】：2014-03-23 04:17:29

【问题描述】：

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

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>

【参考方案1】：

Bryce Easley 的回答是正确的，但我必须使用 ngx-bootstrap

<td 
    container="body"                
    tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
    triggers="click">icon
</td>

https://valor-software.com/ngx-bootstrap/#/tooltip#append-to-body

【参考方案2】：

你可以这样设置“数据容器”：

// initalize boostrap tooltip
    $(function () 
        $('[data-toggle="tooltip"]').tooltip(
            container: 'body'
        )
    )

【参考方案3】：

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

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

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

【讨论】：

为什么我看不到这个 Bootstrap 的文档？好的。谢谢。

我不确定它是引导程序的一部分，我认为它是特定于 jQuery 的。检查他们的文档。

它位于标记为按钮组和输入组中的工具提示需要特殊设置的部分中，没有特别提到表格，但想法是如果工具提示重叠，它将能够不受干扰地展示。

此修复不适用于动态插入页面的内容。

在一些 上有工具提示的大 中，我遇到了同样的移动问题，这使我的页面非常慢。感谢 data-container="body"，它修复了它。