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

capriscapris 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.

Answers

  • capriscapris Posts: 17Questions: 7Answers: 0

    $("#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.

This discussion has been closed.