将鼠标悬停在单元格上时获取表格单元格（td）的工具提示

Question

如何让此查询在 td 具有 id="tooltipexcess" 的每一行上显示工具提示？

在具有动态行数的表格中，我尝试使用 jquery mouseoover 和工具提示来显示 TD 单元格的完整值，因为它在屏幕上的显示宽度有限。我的代码适用于第一行，但不适用于第二行、第三行或其他行。

<table class="table table-borderless table-sm table-limit-excess rounded mt-2">
        <tbody><tr class="bg-primary text-white">
            <th class="pl-2">Key</th>
            <th class="pr-2">Data</th>
            <th class="pr-2">Condition</th>
        </tr>
            <tr>
                <td>12</td>
                <td id="tooltipexcess" title="123456789012345,  A123456789012345">123456789012345,  A123456789012345</td>
                <td>Equal To</td>
            </tr>
            <tr>
                <td>92</td>
                <td id="tooltipexcess">322312323</td>
                <td>Contains</td>
            </tr>
            <tr>
                <td>230</td>
                <td id="tooltipexcess">123233,  333,  3312213,  2132321,  3fsdff</td>
                <td>Equal To</td>
            </tr>
    </tbody>
</table>

<script>
    // here we add tooltip hint to compensate for table cell limited on display width
    $("#tooltipexcess").on("mouseover", function () {
        $(this).attr("title", $(this).text());
    });

</script>

我尝试了以下操作，但这根本不起作用。

<script>
    // here we add tooltip hint to compensate for table cell limited on display width
    $("#tooltipexcess").on("mouseover", function () {
        var td = $(this).closest('tbody').find('> td > td:eq(' + td.index() + ')');
        td.attr("title", td.text());
    });
</script>

Answer 1

Id在整个dom中只能是一个。 您可以使用类来代替。 检查下面的代码并尝试将鼠标悬停在上面。

    $(".tooltipexcess").on("mouseover", function (){
        console.log($(this).text());
        // YOUR LOGIC
        $(this).attr("title", $(this).text());
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-borderless table-sm table-limit-excess rounded mt-2">
        <tbody><tr class="bg-primary text-white">
            <th class="pl-2">Key</th>
            <th class="pr-2">Data</th>
            <th class="pr-2">Condition</th>
        </tr>
            <tr>
                <td>12</td>
                <td class="tooltipexcess" title="123456789012345,  A123456789012345">123456789012345,  A123456789012345</td>
                <td>Equal To</td>
            </tr>
            <tr>
                <td>92</td>
                <td class="tooltipexcess">322312323</td>
                <td>Contains</td>
            </tr>
            <tr>
                <td>230</td>
                <td class="tooltipexcess">123233,  333,  3312213,  2132321,  3fsdff</td>
                <td>Equal To</td>
            </tr>
    </tbody>
</table>

Answer 2

好吧，首先您需要在每个 elm 的代码中都有唯一的 id。至少要与 jquery 或 js 一起使用。

只需用这个替换你的jquery代码

<script>
    // here we add tooltip hint to compensate for table cell limited on display width
    $(".tooltipexcess").on("mouseover", function () {
        $(this).attr("title", $(this).text());
    });
</script>

所有相关元素的 Id 和类是示例代码。

<tr>
        <td>12</td>
        <td class="tooltipexcess" title="123456789012345,  A123456789012345">123456789012345,  A123456789012345</td>
        <td>Equal To</td>
    </tr>
    <tr>
        <td>92</td>
        <td class="tooltipexcess">322312323</td>
        <td>Contains</td>
    </tr>
    <tr>
        <td>230</td>
        <td class="tooltipexcess">123233,  333,  3312213,  2132321,  3fsdff</td>
        <td>Equal To</td>
    </tr>