在内容较大的表格单元格中引导工具提示偏离中心

bootstrap tooltips off-center in table cells with large content

本文关键字：工具提示 单元格 表格      更新时间：2023-09-26

我有一个在一些单元格中带有链接的表。这些链接中的文本可能相当长。隐藏表格单元格的溢出，因此所有单元格的宽度相同。当我在标签上放置引导工具提示时，这会导致一个问题，因为工具提示会向右移动到链接文本隐藏宽度的中心。

这里是一个小提琴演示我的问题:http://jsfiddle.net/zjy1t9s7/

<table class="table table-condensed table-hover">
    <tbody>
        <tr>
            <td >
                <a data-original-title="666" data-toggle="tooltip" data-placement="bottom" title="">
                    This link has an incredibly long text which shifts the entire tooltip outside of the table cell, I personally think this looks like shit and want to fix it. Let's see if I can reproduce it here.
                </a>
            </td>
                                                                                         <td >
                <a data-original-title="555" data-toggle="tooltip" data-placement="bottom" title="">
                    These are not as big
                </a>
            </td>
            <td >
                <a data-original-title="555" data-toggle="tooltip" data-placement="bottom" title="">
                    These are not as big
                </a>
            </td>
                                                                                          <td >
                <a data-original-title="555" data-toggle="tooltip" data-placement="bottom" title="">
                    These are not as big
                </a>
            </td>
        </tr>
    </tbody>
</table>
td {
    border:1px solid #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 75px;
}

将鼠标悬停在第一个表格单元格上，看看我是什么意思。

这个是可修复的吗?

我尝试的第一件事是将tooltip-info添加到td-tag。但这引起了一点问题，所以我在它周围添加了一个div-wrapper，这对我来说很有效:

<td >
    <div data-original-title="666" data-toggle="tooltip" data-placement="bottom" title="">
        <a>
        This link has an incredibly long text which shifts the entire tooltip outside of the table cell, I personally think this looks like shit and want to fix it. Let's see if I can reproduce it here.
        </a>
    </div>
</td>

添加css: 

td > div {
    max-width: 100%;
    overflow:hidden;
    text-overflow:ellipsis;
}

小提琴:https://jsfiddle.net/zjy1t9s7/1/

编辑:不使用div-wrapper更容易解决

添加到你的css:

td > a {
    display:inline-block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
}
如， ， <&>等文本标签需要定义为block-type displaystyle，如果你想指定宽度或使用padding

小提琴:http://jsfiddle.net/zjy1t9s7/2/

相关文章：