Search code examples
jquerydatatablestipsy

jQuery tipsy on datatables (live update)

I have a table using the datatable plugin with a link using the tipsy plugin.

I have a link that uses tipsy and works fine with the following code:

<tr class="gradeX">
    <td class="valign"><a href="#" title="" class="btnIconLeft leftDir mr10" original-title="Test"><span style="width:90px; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;">Test</span></a></td>
    <td class="valign center">1</td>
    <td class="center valign">1</td>
    <td class="center valign">29/05/2012</td>
    <td class="valign"></td>
</tr>

jS:

    $('.leftDir').tipsy({fade: true, gravity: 'e', live: true});

However as soon as I press page two on the table, none of the others work.

I think its either due to the live update or the fact that the next 10 rows are hidden, and the tooltip remains hidden

Solution

  • You probably have to add this line: 

    $('.leftDir').tipsy({fade: true, gravity: 'e', live: true});

    as an event. There is an event that is triggered when you press second page/filter or do anything that changes the table. Try this:

    $(oTable).on("draw", function() {
    $('.leftDir').tipsy({fade: true, gravity: 'e', live: true});
});

    Now the tipsy part will be added on every draw of the table. So if you switch pages it should be working fine.