jQuery 如何将工具提示添加到表格中的 td
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4995534/
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 tooltip to td in a table
提问by Belmark
Can someone give me an example of adding a tooltip whenever I hover a tdin a table.
有人可以举个例子，当我将 a 悬停td在table.
The content of the tooltip must come from database records.
工具提示的内容必须来自数据库记录。
Example:
例子：
If I hover A name on a table.. the tooltip must display his/her information.
如果我将名字悬停在桌子上.. 工具提示必须显示他/她的信息。
回答by ?ime Vidas
Use the titleattribute:
使用title属性：
<table>
<tr>
<td>
<a href="#" title="John Smith lives in New York."> John Smith </a>
</td>
</tr>
</table>
Live demo:http://jsfiddle.net/GpU5f/
现场演示：http : //jsfiddle.net/GpU5f/
回答by Pete Wilson
You'll get a tooltip on hover if you add 'title="whatever"' to the <td>:
如果将 'title="whatever"' 添加到<td>：
<tr><td title="whatever">hover here to see "whatever" in a tooltip</td>
Where the title content comes from is a different and perhaps more difficult story, but perhaps you can arrange for the program code that is providing the cell's innerText to do the same for the cell's title=....
标题内容的来源是一个不同且可能更困难的故事，但也许您可以安排提供单元格innerText 的程序代码对单元格的title=....
HTH
HTH
-- pete
——皮特
回答by robisrob
since the original question was tagged jquery and none of the examples mention this (however trivial), it's just a matter of
由于原始问题被标记为 jquery 并且没有一个示例提到这一点（无论多么微不足道），这只是一个问题
$(tdSelector).attr('title', titleText);
$(tdSelector).attr('title', titleText);
回答by Shaz
<?php
$test = "Test"
?>
<table>
<tr>
<td title="<?php echo $test; ?>">Hi there</td>
</tr>
</table>
回答by Mohini
In angular.jsit can work like this:-
在angular.js 中它可以这样工作：-
<table>
<tr ng-repeat="data in list">
<td class="table-text-right tooltip-enable-mandatory" data-toggle="tooltip" data-container="#tableRoceMovement"data-original-title="{{data.value}}" title="{{data.value}}"data-placement="bottom" data-html="true" onmouseenter="tooltipEnterEvent($(this))" onmouseleave="tooltipLeaveEvent($(this))">{{data.value}}</td>
</tr>
</table>
