Tooltips Should Not Be Rendered While Dragging an Element

[robavs]

In my application, I have a component with multiple tooltips, some of which are disabled depending on the component type. However, when I start dragging the component, the tooltips move along with it, causing visual glitches, as shown in the screenshot below.

To demonstrate this issue, I created a simplified example with a single tooltip. If you hover over the inner div, the tooltip appears. When dragging starts, the tooltip is incorrectly dragged along with the outer div.

You can check the example here:

https://codesandbox.io/p/github/robavs/DnD-bug/master?import=true

[michaelabrahamian]

Hey @robavs 👋 I had a look at your example. The tooltip visibility is managed by your application's logic and state - so pragmatic-drag-and-drop won't automatically hide your tooltip :)

If you want to hide it while dragging, you can use the onGenerateDragPreview event to update your state to remove the tooltip from the DOM. This will make sure it's not included in the drag preview.

Example code based on your linked codesandbox example:

  const [tooltip1, setTooltip1] = useState(false);

  useEffect(() => {
    draggable({ 
      element: itemRef.current,
      onGenerateDragPreview: () => {
        setTooltip1(false)
      }
     })
  }, []);