[BUG] "mousemove" is not working on drag but "pointermove" event will work

[dhruvsakariya]

Problem
When i am using "react-tooltip" with my "react-simple-maps" it is not moving when i start dragging around the map.

react-tooltip.mousemove.mp4

My Thought
After Looking into code base i have noticed that there is "mousemove" event is attatched for this work but it will not triggered when we start dragging. to also support dragging we need to replace this with "pointermove" event.

Describe alternatives
If there is any way to achive floating tooltip with other solution please show me that path and i am very thankful for that.

Additional context
Thanks you for spotting this issue

[gabrieljablonski]

I'm not sure switching to pointermove would improve this, but even if it did, it's not the best approach for this situation.

I don't recall react-simple-maps DOM structure exactly, but try something similar to this:

<MyComponent>
  <MapContainer style={{ position: 'relative' }}>
    <MapElement data-tooltip-id="my-tooltip" data-tooltip-content="tooltip content" />
    <Tooltip id="my-tooltip" float />
  </MapContainer>
</MyComponent>

I believe the "draggable" behavior should work the same as when scrolling an element. By default, the tooltip uses position: absolute to position itself, so when we set the <MapContainer /> element position attribute, it should work as you expect.

Just as a side note, you don't have to set it through the inline style prop, you can also use regular CSS or a styled component.

[dhruvsakariya]

@gabrieljablonski Thanks you for helping with this issue

• I am also not sure switching to pointermove will work or not 💁🏼‍♂️.

This is elements structure for react-simple-maps in virtual DOM.

<div className="relative">
     {/* Map 🗺️ */}
     <ComposableMap projection="geoMercator" className="w-[800px] h-[600px]">
       <ZoomableGroup
         zoom={position.zoom}
         center={position.coordinates}
         onMoveEnd={handleMoveEnd}
       >
         <Geographies geography={geoUrl}>
           {({ geographies }) =>
             geographies.map((geo) => {
               return (
                 <Geography
                   key={geo.rsmKey}
                   geography={geo}
                   onMouseEnter={() => {
                     document.body.classList.add("target");
                   }}
                   onMouseLeave={() => {
                     document.body.classList.remove("target");
                   }}
                   fill={geo.properties.color}
                   stroke="#bec1c4"
                   strokeWidth="0.5"
                   className="focus:outline-none"
                   data-tooltip-id={id}
                   style={
                     {
                       // hover: {
                       //   fill: "#046A38",
                       //   outline: "none",
                       // },
                       // pressed: {
                       //   fill: "#FF671F",
                       //   outline: "none",
                       // },
                     }
                   }
                 />
               );
             })
           }
         </Geographies>
       </ZoomableGroup>
     </ComposableMap>

     {/* Tooltip💡 */}
     <Tooltip
       ref={tooltip}
       id={id}
       float
       className={`!p-0 !rounded-lg !bg-white !text-inherit ${shadow_custom_world_map} select-none z-10`}
       arrowColor={"white"}
       opacity={1}
     >
       <div className="flex gap-x-5 px-4 pt-1 pb-2">
         <div className="flex justify-center items-center">
           <span
             className={`fi fi-br fis mr-2 !leading-[1.15em] rounded-full h-5 !w-5`}
           />
           <p className="font-primary-Regular">Brazil</p>
         </div>
         <div>
           <small className=" font-primary-Regular  ">Online Revenue</small>
           <p className="text-sm font-primary-Regular">$13,450,000</p>
         </div>
       </div>
     </Tooltip>
     {/* Zoom in-out 🔍🔎 */}
     <div className="absolute right-0 bottom-0">
       <div
         className={`bg-white rounded-lg p-2 mx-3 my-1 ${shadow_custom_world_map}`}
       >
         <button
           className="block p-1 pb-2"
           title="zoom in"
           type="button"
           onClick={handleZoomIn}
         >
           <FaPlus />
         </button>
         <button
           className="block p-1 pt-2"
           title="zoom out"
           type="button"
           onClick={handleZoomOut}
         >
           <FaMinus />
         </button>
       </div>

       <button
         title="center"
         type="button"
         onClick={handleCenter}
         className={`p-3 mx-3 mt-1 mb-2 bg-white rounded-lg float-right ${shadow_custom_world_map}`}
       >
         <BiTargetLock />
       </button>
     </div>
     {/* Legends 📑 */}
     <div
       className={`absolute right-0 top-0 bg-white rounded-2xl p-2 m-3 ${shadow_custom_world_map}`}
     >
       {legends.map(({ color, name }) => {
         return (
           <div
             key={color}
             className="font-primary-Regular flex  items-center my-1.5 gap-x-3"
           >
             <div
               className="w-4 h-4 rounded-sm"
               style={{ background: color }}
             />
             <span className="text-sm">{name}</span>
           </div>
         );
       })}
     </div>
   </div>

Actually I did the same thing in my Implementation by Adding Tooltip after Map Element but it is not moving while dragging MapElement

[gabrieljablonski]

From what I can tell, you'll have to place the tooltip component inside ZoomableGroup, which is also the element you will have to set the position attribute to relative.

Try that and let me know the result.

[dhruvsakariya]

From what I can tell, you'll have to place the tooltip component inside ZoomableGroup, which is also the element you will have to set the position attribute to relative.

Try that and let me know the result.

Tried by Putting Tooltip inside ZoomableGroup but still when i start dragging map tooltip doesn't move ( as before ).

What could be the other possible Solution ? 🤔💭

[gabrieljablonski]

Can you provide a reproducible example? Either a repo or a CodeSandbox or similar. We might be able to help out by having one.

Tried copying the code you posted, but couldn't figure out some of the stuff that's missing.

[dhruvsakariya]

Can you provide a reproducible example? Either a repo or a CodeSandbox or similar. We might be able to help out by having one.

Tried copying the code you posted, but couldn't figure out some of the stuff that's missing.

Here is the working environment on code sandbox

[gabrieljablonski]

@dhruvsakariya your initial assessment about using pointermove instead was accurate. Your example using the beta version [email protected]:

https://codesandbox.io/p/sandbox/world-map-with-react-tooltip-issue-forked-sq8z98?file=%2Fsrc%2FApp.tsx%3A10%2C5

An official release should be up soon. Feel free to use [email protected] until then.

[dhruvsakariya]

@dhruvsakariya your initial assessment about using pointermove instead was accurate. Your example using the beta version [email protected]:

https://codesandbox.io/p/sandbox/world-map-with-react-tooltip-issue-forked-sq8z98?file=%2Fsrc%2FApp.tsx%3A10%2C5

An official release should be up soon. Feel free to use [email protected] until then.

Thanks @gabrieljablonski for helping to resolve this issue

[gabrieljablonski]

Fix available on official version [email protected]