如何使用 jquery 将工具提示添加到“td”？

Posted 2023-05-08

【中文标题】如何使用 jquery 将工具提示添加到“td”？

【英文标题】：How to add a Tooltip to a "td" with jquery?

【发布时间】：2010-09-15 00:07:03

【问题描述】：

我需要使用 jquery 在我的表中的“td”元素中添加一个工具提示/alt。

谁能帮帮我？

我试过了：

var tTip ="Hello world";
$(this).attr("onmouseover", tip(tTip));

我已确认我将“td”用作“this”。

**编辑：**我可以通过使用“alert”命令捕获“td”元素并且它有效。所以由于某种原因，“提示”功能不起作用。有人知道为什么会这样吗？

【参考方案1】：

$(this).mouseover(function() 
    tip(tTip);
);

更好的方法可能是将title 属性放在您的html 中。那样的话，如果有人关闭了 javascript，他们仍然会得到一个工具提示（尽管它不像 jQuery 那样漂亮/灵活）。

<table id="myTable">
    <tbody>
        <tr>
            <td title="Tip 1">Cell 1</td>
            <td title="Tip 2">Cell 2</td>
        </tr>
    </tbody>
</table>

然后使用此代码：

$('#myTable td[title]')
    .hover(function() 
        showTooltip($(this));
    , function() 
        hideTooltip();
    )
;

function showTooltip($el) 
    // insert code here to position your tooltip element (which i'll call $tip)
    $tip.html($el.attr('title'));

function hideTooltip() 
    $tip.hide();

【讨论】：

你能详细说明一下吗？会发生什么？有任何错误信息吗？你真的有一个叫做“tip”的函数吗？

【参考方案2】：

你可能想看看http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

【参考方案3】：

$('#grdList tr td:nth-child(5)').each(function(i) 
    if (i > 0)  //skip header
        var sContent = $(this).text();
        $(this).attr("title", $(this).html());
        if (sContent.length > 20) 
            $(this).text(sContent.substring(0,20) + '...');
        
    
);

grdList - 表ID

td:nth-child(5) - 第 5 列

【讨论】：

这对我帮助很大，但是使用$(this).text() 作为标题而不是$(this).html() 更有意义，尤其是。如果您的单元格中有超链接。

【参考方案4】：

var tTip ="Hello world";
$(this).mouseover( function()  tip(tTip); );

【参考方案5】：

grdList - 表ID

td:nth-child(5) - 列

$('#grdList tr td:nth-child(5)').each(function(i) 
    if (i > 0)  //skip header
        var sContent = $(this).text();
        $(this).attr("title", $(this).html());
        if (sContent.length > 20) 
            $(this).text(sContent.substring(0,20) + '...');
        
    
);

【参考方案6】：

如果您确实想将这些工具提示放在表格单元格而不是表格标题上——它们会更有意义——请考虑将它们放在表格单元格内部的内容中，这样更有意义.