Jquery tooltip stays after dynamic change of DataTable contents

Question

I'm using the jQuery tooltip for Datatable to show dynamic content. While loading the the dynamic content the tooltip of the old element stays after the new content has been loaded. I have seen exactly the same questions being asked, but the accepted answers does not seem to have work in my scenario. Below is the code of tooltip which I added to the whole document

$(document).tooltip({
  position: {
    my: "center top",
    at: "center bottom+10",
    using: function( position, feedback ) {

      $( this ).css( position );
      $( "<div>" )
        .addClass( "arrow" )
        .addClass( feedback.vertical )
        .addClass( feedback.horizontal )
        .appendTo( this );
    }
  }
});

Changing the using: as below(as suggested by similar questions) does not solve my problem.

using: function( position, feedback ) {
            /* fix tooltip not hiding problem */
            if($( ".ui-tooltip" ).length>1){
                // since the new tooltip is already added, there are now 2. 
                // removing the first one fixes the problem
                $( ".ui-tooltip" )[0].remove();
            }
            $( this ).css( position );
            $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        }
    }
});

Answer 1

This is an old question, but an issue I've recently experienced. The solution I chose was to remove all tooltips from the page when the dynamic content is reloaded. If you are using the DataTables library, this would be in the drawCallback initialisation property.

You can remove all tooltips like this:

$(".ui-tooltip").remove();