If the user displays the tooltip of a column and then starts the table column reordering operation via drag and drop, the tooltip will no longer be cleared.
By starting the table column reordering operation, a table overlay is created. This has the same appearance as the table itself, but unlike the table, it is column-based rather than row-based. In particular, the content of the original table cells is copied to the overlay, including the tooltip data attribute.
At the document an EventListener is registered on the mouseover event, which checks for the target element, i.e. the element over which is hovered, whether the data attribute tooltip exists for this element. If it does, a tooltip is created and placed.
After the table overlay is created, the dragged column is placed. In particular, the cursor is located at the upper left corner of the drafted column i.e. generally in the area of the column header that has a tooltip. This will create a new tooltip. However, when rearranging the columns, the user should not see any other tooltips.
Implementation
For the overlay, an EventListener is registered to the mouseover event, which prevents the event from propagating towards the DOM root node. After the columns have been reordered, this is removed.
Test
Navigate cursor over column label so that a tooltip is displayed. Then "click" to reorder columns. No tooltip should be displayed.