Thanks for looking into my trouble.
I've look at many related topic on this subject, tried many solution but it still didn't solve my problem.
I have a generated DataTable, and I want some customize Tooltips to appear on cells. To make it short and simple, let's assume I just want <i>italics</i>
to shows up on tr
markup.
This is what I actually have after many change:
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 2.2.3 -->
<script src="/miscellaneous/adminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/miscellaneous/adminLTE/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/miscellaneous/adminLTE/dist/js/app.min.js"></script>
<!-- Data Tables -->
<script src="/miscellaneous/bov2/js/jquery.dataTables.min.js"></script>
<script src="/miscellaneous/bov2/js/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="/miscellaneous/adminLTE/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/miscellaneous/adminLTE/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/miscellaneous/adminLTE/dist/js/demo.js"></script>
<!-- page script -->
<script>
$(document).ready(function () {
/* Init DataTables */
$('#example').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"processing": true,
"serverSide": true,
"ajax": {
"url": "{{ path('tableUserAjax') }}",
"type": "POST",
"dataType": "json",
},
"columns": [
{"data": "login"},
{"data": "name"},
{"data": "date"},
{"data": "language"},
{"data": "group"},
{"data": "role"},
{"data": "valid"}],
"fnDrawCallback": function (oSettings) {
$('#example tbody tr').each(function () {
var sTitle;
var nTds = $('td', this);
var s0 = $(nTds[0]).text();
sTitle = "<h1>" + s0 + "</h1>";
this.setAttribute('rel', 'tooltip');
this.setAttribute('title', sTitle);
});
}
});
/* Apply the tooltips */
$('#example').tooltip({
html : true,
/* i tried this : content: "<b>Bold</b>, <i>Italic</i>",*/
});
});
</script>
And here is my HTML table (with one ligne to keep it simple):
<table class="table table-bordered table-hover dataTable no-footer" id="example" role="grid" style="width: 1163px;" data-original-title="" title="">
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 96.2px;"
aria-sort="ascending" aria-label="Login: activate to sort column descending">Login
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 176.2px;"
aria-label="Name: activate to sort column ascending">Name
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 201.2px;"
aria-label="Date: activate to sort column ascending">Date
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 145.2px;"
aria-label="Language: activate to sort column ascending">Language
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 102.2px;"
aria-label="Group: activate to sort column ascending">Group
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 83.2px;"
aria-label="Role: activate to sort column ascending">Role
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 88px;"
aria-label="Valid: activate to sort column ascending">Valid
</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd" rel="tooltip" title="<h1>Aaron</h1>">
<td class="sorting_1">Aaron</td>
<td>Aaron MARTIN</td>
<td>30 mars 2016</td>
<td>English</td>
<td>Marketing</td>
<td></td>
<td>0</td>
</tr>
</tbody>
</table>
Shouldn't this work?
This will set it globally for all datatables
$( document ).ajaxComplete(function() {
// Required for Bootstrap tooltips in DataTables
$('[data-toggle="tooltip"]').tooltip({
"html": true,
"delay": {"show": 1000, "hide": 0},
});
});