jQuery 如何为每个单元格显示工具提示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11309749/
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 display tool tip for each cell?
提问by user244394
How can I modify the code to display each cell information into a tooltip??
如何修改代码以将每个单元格信息显示到工具提示中？
http://datatables.net/release-datatables/examples/advanced_init/events_post_init.html
http://datatables.net/release-datatables/examples/advanced_init/events_post_init.html
$(document).ready(function() {
/*
* First step is to create title attributes for the rows in the table
* This isn't needed if the required 'title' attribute is already set in the HTML in the
* DOM
*/
$('#example tbody tr').each( function() {
var sTitle;
var nTds = $('td', this);
var sBrowser = $(nTds[1]).text();
var sGrade = $(nTds[4]).text();
if ( sGrade == "A" )
sTitle = sBrowser+' will provide a first class (A) level of CSS support.';
else if ( sGrade == "C" )
sTitle = sBrowser+' will provide a core (C) level of CSS support.';
else if ( sGrade == "X" )
sTitle = sBrowser+' does not provide CSS support or has a broken implementation. Block CSS.';
else
sTitle = sBrowser+' will provide an undefined level of CSS support.';
this.setAttribute( 'title', sTitle );
} );
/* Init DataTables */
var oTable = $('#example').dataTable();
/* Apply the tooltips */
oTable.$('tr').tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );
} );
回答by André B.
You can do
你可以做
{ "sTitle": "...", ...
'fnCreatedCell': function(nTd, sData, oData, iRow, iCol) {
nTd.title = 'Some more information';
}
}
in your column configuration. You can use all the row data easily like this. Of cause, this must not be missing:
在您的列配置中。您可以像这样轻松使用所有行数据。当然，这不能缺少：
oTable.$('td').tooltip( {
"delay": 0,
"track": true,
"fade": 100
} );
回答by Sunil Chavan
You can set title by simply setAttribute for each td
您可以通过简单的 setAttribute 为每个 td 设置标题
$('#example tbody tr td').each( function() {
this.setAttribute( 'title', $(this).text());
});
and call tooltip on td
并在 td 上调用工具提示
oTable.$('td').tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );
