Ajax Reload Title/Tooltip staying on screen on reload

bluewizard

Hello All,
I have a DataTable 1.10.7 table that is ajax loaded. Part of the load process in one of the columns I have 3 buttons that can be clicked on to launch some javascript. Each of those buttons has a title with the action name that works as a tool tip.

There is also a setInterval that fires every minute to reload the datatable.

When the datatable reloads if the tool tip is showing the first time (nice looking outline) it will stay where it was.
If the table has reloaded it shows normal un-styled tool tip but then goes away as I expect on reloads.

I was wondering what I can do to prevent the initial from being "frozen" on the screen so to say. It shows the new data but the old popup is still there. New ones popup as expected except anything under where the old one is won't fire.

Here is a snippet over me JS that I use the create the table with those columns.

....,
{ date: 'item x',
title: 'Item x',
render: function (data, type, row) {
return '

' + row.num + '

';
}
},
{ data: null,
title: 'Actions',
render: function ( data, type, row ) {
return "<a title='Action 1' href='#' onclick='action1(" + row.num
+ ");return false;'><img src='images/icons/round68.svg' height='24' width='24'></a>"
+ "<a title='Action 2' href='#' onclick='action2(" + row.num
+ ");return false;'><img src='images/icons/round73.svg' height='24' width='24'></a>"
+ "<a title='Action 3' href='#' onclick='action3(" + row.num
+ ");return false;'><img src='images/icons/round84.svg' height='24' width='24'></a>";
}
},
...

I appreciate the help.

bluewizard

I appear to have the following in my initComplete.

"initComplete": function(settings, json) {
$("[title]").tooltip();
},
...

When I remove that tooltip I don't get the pretty tool tips but the tool tips also don't stay around forever either once the table re-loads.

Unsure if I need to re-run the tooltip on the reload or ?