Bootstrap Tooltip不适用于使用jQuery DataTables的子行.
使用fnDrawCallback它适用于常规行,但它对子行没有影响,我不知道如何使其工作.
"fnDrawCallback": function( oSettings ) {
$('[rel="tooltip"]').tooltip();
}
见Child rows和fnDrawCallback以供参考.
HTML示例：
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<Meta name="viewport" content="initial-scale=1.0,maximum-scale=2.0">
<title>DataTables example - Child rows (show extra / detailed information)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/Syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
td.details-control {
background: url('../resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('../resources/details_close.png') no-repeat center center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/Syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" class="init">
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Tooltip:</td>'+
'<td><span rel="tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="display the tooltip" class="souligne">text with a tooltip</span></td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "objects.txt","columns": [
{
"className": 'details-control',"orderable": false,"data": null,"defaultContent": ''
},{ "data": "name" },{ "data": "position" },{ "data": "office" },{ "data": "salary" }
],"fnDrawCallback": function( oSettings ) {
$('[rel="tooltip"]').tooltip();
},"order": [[1,'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click','td.details-control',function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Child rows (show extra / detailed information)</span></h1>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</section>
<h1>Tooltip works outside:</h1>
<span rel="tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="display the tooltip" class="souligne">text with a tooltip</span>
</div>
<script type="text/javascript">
$(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
AJAX来源：
{
"data": [
{
"name": "<span rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"\" data-original-title=\"this is a tooltip\" class=\"souligne\">Tiger Nixon<\/span>","position": "System Architect","salary": "$320,800","start_date": "2011/04/25","office": "Edinburgh","extn": "5421"
},{
"name": "<span rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"\" data-original-title=\"this is a tooltip\" class=\"souligne\">Test tooltip<\/span>","position": "Accountant","salary": "$162,700","start_date": "2008/11/28","office": "Tokyo","extn": "5407"
},{
"name": "Brielle Williamson","position": "Integration Specialist","salary": "$372,000","start_date": "2012/12/02","office": "New York","extn": "4804"
},{
"name": "Herrod Chandler","position": "Sales Assistant","salary": "$137,500","start_date": "2012/08/06","office": "San Francisco","extn": "9608"
},{
"name": "Rhona Davidson","salary": "$327,900","start_date": "2010/10/14","extn": "6200"
},{
"name": "Michael Bruce","position": "Javascript Developer","salary": "$183,"start_date": "2011/06/27","office": "Singapore","extn": "5384"
},{
"name": "Donna Snider","position": "Customer Support","salary": "$112,"start_date": "2011/01/25","extn": "4226"
}
]
}
您还可以看到,如果您删除：
"fnDrawCallback": function( oSettings ) {
$('[rel="tooltip"]').tooltip();
},
包含工具提示的常用行将无法正常工作.
资料来源：
> http://datatables.net/download/packages
> http://datatables.net/examples/server_side/row_details.html
只需使用我的HTML代码更改文件row_details.html即可查看测试用例(并将文件objects.txt添加到同一文件夹中).
解决方法
尝试提供如下工具提示,而不是在fnDrawCallBak中,而是在$(document).ready上
$('body').tooltip({
selector: '[rel=tooltip]'
});
