我有一个动态表,加载了ajax.当我将鼠标悬停在一行上时,我想显示工具提示,但我希望工具提示显示在某个单元格(带有类.name)上而不是整个行上方.
此外,使用title函数,我需要能够获得最接近的行ID并返回自定义模板.
这是我的代码:
<table class="table" id="myTable">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Country</th>
<th>Statistics</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td >1</td>
<td class="name">Name #1</td>
<td>United States of America</td>
<td>100%</td>
</tr>
<tr id="2">
<td >2</td>
<td class="name">Name #2</td>
<td>United States of America</td>
<td>50%</td>
</tr>
</tbody>
</table>
Run Code Online (Sandbox Code Playgroud)
初始化:
$('#myTable').tooltip({
container: 'body',
html: true,
selector: 'td.name',
trigger: 'manual',
title: function() {
// here will be custom template
var id = $(this).parent().atrr('id');
return id;
}
});
Run Code Online (Sandbox Code Playgroud)
尝试一:在jsFiddle演示 …