Show dynamic content as a tooltip to column headers for datatable on mouseover
Show dynamic content as a tooltip to column headers for datatable on mouseover
capris
Posts: 17Questions: 7Answers: 0
Hi Allan,
I need to show dynamic content as a tooltip for datatable column headers on mouseover and hide them onmouseout. i tried below script and was unable to do. I have reffered to http://datatables.net/examples/advanced_init/events_pre_init.html, and applied same for <th>. but its failing at setAttribute 'title'. can you please help me here. My datatable is dynamically created with dynamic ID. Sorry to say that I dont have a web page to show you currently.
$("#researchTable-"+clickCount).on('mouseover', '.sessionCols', function () {
var thText = $(this).text(); ------------------ able to get text of <th> with class '.sessionCols'
$.ajax({
url : "/prvn/onlineCustomerTracking/populateToolTip?value="+thText,
success : function(respText) {
var rspText = respText;
this.setAttribute( 'title', respText ); ----------------- throws error here. unable to setattribute
}
});
});
/* Apply the tooltips */
$("#researchTable-"+clickCount).dataTable().$('thead th[class=sessionCols]').tooltip({
"delay": 0,
"track": true,
"fade": 250
});
Please let me know where i'm doing wrong.
This discussion has been closed.
Answers
$("#researchTable-"+clickCount).on('mouseover', '.sessionCols',function () {
var thText = $(this).text();
var hoverTxt;
$.ajax({
url : "/prvn/onlineCustomerTracking/populateToolTip?value="+thText,
async : false,
success : function(respText) {
hoverTxt = respText;
}
});
this.setAttribute( 'title', hoverTxt );
});
making async : false, for ajax call and setting attribute outside made it work. Hence closing it.