jQuery 如何使用jquery向“td”添加工具提示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/165650/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a Tooltip to a "td" with jquery?
提问by SpoiledTechie.com
I need to add a tooltip/alt to a "td" element inside of my tables with jquery.
我需要使用 jquery 向表内的“td”元素添加工具提示/alt。
Can someone help me out?
有人可以帮我吗？
I tried:
我试过：
var tTip ="Hello world";
$(this).attr("onmouseover", tip(tTip));
where I have verified that I am using the "td" as "this".
我已经验证我使用“td”作为“this”。
**Edit:**I am able to capture the "td" element through using the "alert" command and it worked. So for some reason the "tip" function doesn't work. Anyone know why this would be?
**编辑：**我能够通过使用“alert”命令捕获“td”元素并且它起作用了。所以出于某种原因，“提示”功能不起作用。有谁知道为什么会这样？
回答by nickf
$(this).mouseover(function() {
tip(tTip);
});
a better way might be to put titleattributes in your HTML. That way, if someone has javascript turned off, they'll still get a tool tip (albeit not as pretty/flexible as you can do with jQuery).
更好的方法可能是将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>
and then use this code:
然后使用此代码：
$('#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();
}
回答by John Boker
you might want to have a look at http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
你可能想看看http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
回答by Avi
$('#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 - table id
grdList - 表 ID
td:nth-child(5) - column 5
td:nth-child(5) - 第 5 列
回答by Avi
grdList - table id
grdList - 表 ID
td:nth-child(5) - column
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) + '...');
}
}
});
回答by John Boker
var tTip ="Hello world";
$(this).mouseover( function() { tip(tTip); });
回答by Kent Brewster
If you really do want to put those tooltips on your table cells and not your table headers--where they'd make much more sense--please consider putting them on the content INSIDE the table cells, where it's much more meaningful.
如果您确实想将这些工具提示放在表格单元格而不是表格标题上——它们会更有意义——请考虑将它们放在表格单元格内的内容上，这样更有意义。
