Tooltips for every table cell with a twist
Tooltips for every table cell with a twist
Hi,
my Problem is that I want to apply to each td an individual tooltip.
I have searched this forums, found the solutions provided (for rows) and tested them in my environment. I also modified them to go even further. But I'm currently stuck and don't know what to do, to get it working.
Applying a tooltip for a complete row is working, but no option.
The circumstances:
The table itself is build up in two phases, first off I parse a file which will determine how many tds we will have and return that to the page (thead, tbody, tfoot + jQuery stuff).
Then the data content is loaded via Ajax.
Here is my table javascript:
[code]
var testTable = jQuery("#testTable").dataTable({
"bProcessing": true,
"bJQueryUI": true,
"bPaginate": false,
"bLengthChange": false,
"bAutoWidth": true,
"sPaginationType": "full_numbers",
"aaSorting": [],
"sAjaxSource": '@Url.Content("~/GetJson?pStyle=testTable")',
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
//this code is working
//iterate over all tds of this row and apply title
for(var a=0, i=aData.length; a < i; a++){
var title = aData[a];
$(nRow.children(a)).attr("title",title);
}
return nRow;
},
"fnInitComplete": function() {
// Apply the tooltips
//this does not work for all tds
$( top100sTable.fnGetNodes() ).tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );
},
"aoColumnDefs": [
{
"fnRender": function(oObj){
return formatTableCell(oObj);
},
"aTargets": ["_all"]
}
]
});
function formatTableCell(oObj) {
var sReturn = oObj.aData[ oObj.iDataColumn ];
var lCaption = sReturn;
var lSettings = oObj.oSettings;
var lColumn = lSettings.aoColumns[oObj.iDataColumn];
if(isNumber(lCaption))
{
lColumn.sClass = "right";
}
else{
lColumn.sClass = "";
}
//is it possible to apply the title here? to lColumn?
if(lCaption.length > 30)
{
sReturn = lCaption.substring(0, 29) + "...";
}
return sReturn;
}
[/code]
I have added the function formatTableCell (shortened), function isNumber() should be self explanatory.
In the function formatTableCell the text of a table td will be shortened to 30 chars if longer. My need for a tooltip is, that I want to show the full text in the tooltip. At the time the tooltip will be applied (in fnRowCallback), the text is already shortened and "nearly" useless.
Is it possible to apply the title to a td in function formatTableCell()?
So at the end there are two problems:
- apply title to each td, before the information is shortened
- apply tooltip to each td
Thanks for helping,
steve
my Problem is that I want to apply to each td an individual tooltip.
I have searched this forums, found the solutions provided (for rows) and tested them in my environment. I also modified them to go even further. But I'm currently stuck and don't know what to do, to get it working.
Applying a tooltip for a complete row is working, but no option.
The circumstances:
The table itself is build up in two phases, first off I parse a file which will determine how many tds we will have and return that to the page (thead, tbody, tfoot + jQuery stuff).
Then the data content is loaded via Ajax.
Here is my table javascript:
[code]
var testTable = jQuery("#testTable").dataTable({
"bProcessing": true,
"bJQueryUI": true,
"bPaginate": false,
"bLengthChange": false,
"bAutoWidth": true,
"sPaginationType": "full_numbers",
"aaSorting": [],
"sAjaxSource": '@Url.Content("~/GetJson?pStyle=testTable")',
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
//this code is working
//iterate over all tds of this row and apply title
for(var a=0, i=aData.length; a < i; a++){
var title = aData[a];
$(nRow.children(a)).attr("title",title);
}
return nRow;
},
"fnInitComplete": function() {
// Apply the tooltips
//this does not work for all tds
$( top100sTable.fnGetNodes() ).tooltip( {
"delay": 0,
"track": true,
"fade": 250
} );
},
"aoColumnDefs": [
{
"fnRender": function(oObj){
return formatTableCell(oObj);
},
"aTargets": ["_all"]
}
]
});
function formatTableCell(oObj) {
var sReturn = oObj.aData[ oObj.iDataColumn ];
var lCaption = sReturn;
var lSettings = oObj.oSettings;
var lColumn = lSettings.aoColumns[oObj.iDataColumn];
if(isNumber(lCaption))
{
lColumn.sClass = "right";
}
else{
lColumn.sClass = "";
}
//is it possible to apply the title here? to lColumn?
if(lCaption.length > 30)
{
sReturn = lCaption.substring(0, 29) + "...";
}
return sReturn;
}
[/code]
I have added the function formatTableCell (shortened), function isNumber() should be self explanatory.
In the function formatTableCell the text of a table td will be shortened to 30 chars if longer. My need for a tooltip is, that I want to show the full text in the tooltip. At the time the tooltip will be applied (in fnRowCallback), the text is already shortened and "nearly" useless.
Is it possible to apply the title to a td in function formatTableCell()?
So at the end there are two problems:
- apply title to each td, before the information is shortened
- apply tooltip to each td
Thanks for helping,
steve
This discussion has been closed.