defect
If the user displays a column's tooltip and then begins the process of rearranging table columns using drag-and-drop, the tooltip will no longer be hidden.
Starting the process to reorder table columns creates a table overlay. This overlay has the same layout 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 into the overlay, including the ` tooltip` data attribute.
An event listener is registered on the document for the ` mouseover` event, which checks for the ` tooltip ` data attribute on the `target` element—that is, the element being hovered over. If the `tooltip` data attribute exists for this element, a tooltip is created and positioned.
After the table overlay is generated, the dragged column is positioned. Specifically, the cursor is located at the upper-left corner of the dragged column—that is, generally within the area of the column header, which has a tooltip. This creates a new tooltip. However, when rearranging the columns, the user should not see any additional tooltips.
Implementation
For the overlay, an event listener is registered for the `mouseover` event, which prevents the event from propagating toward the DOM root node. After the columns have been reordered, this listener is removed.
Test
Hover the cursor over the column label so that a tooltip is displayed. Then “click” to reorder the columns. No tooltip should be displayed.