grdList - 表格ID

Question

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

有人能帮助我吗？

我试过了：

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

我已经确认我使用“td”作为“此”。

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

Answer 1

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

更好的方法可能是在您的HTML中添加title个属性。这样一来，如果某人关闭了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();
}

Answer 2

您可能需要查看http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Answer 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栏

Answer 4

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

Answer 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) + '...');
        }
    }
});

Answer 6

如果你确实想把这些工具提示放在你的表格单元而不是你的表格标题上 - 那么它们更有意义 - 请考虑将它们放在表格单元格中的内容中，它更有意义

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

6 个答案:

grdList - 表格ID