Tooltip is blinking when hovered to the lower part of the map

neveldo / jQuery-Mapael

jQuery plugin based on raphael.js that allows you to display dynamic vector maps

https://www.vincentbroute.fr/mapael/

MIT License

1.01k stars 195 forks source link

Tooltip is blinking when hovered to the lower part of the map #361

Open sonnyrick-cruz opened 6 years ago

sonnyrick-cruz commented 6 years ago

Description

The tooltip is blinking when mouse pointer and tooltip overlaps.

Expected Behavior

The tooltip should be placed to left instead of right when mouse pointer and tooltip overlaps.

Current Behavior

This might be a bug. For reference, hover to New Zealand (Lower right of Australia). https://rawgit.com/neveldo/jQuery-Mapael/2.1.0/examples/advanced/dataviz_example.html

Environment

Mapael version: latest
Raphael version: latest
Browser Name and version: chrome, latest
Operating System and version (desktop or mobile): desktop

Hope this will be fixed soon, you're awesome :100: :+1:

neveldo commented 6 years ago

Hello, great catch @sonnyrickcruz ! I have the same behaviour (tester with mapael 1.x , 2.x and the master branch).

I have added the issue into the roadmap for the next release : https://github.com/neveldo/jQuery-Mapael/issues/338 .

For now, I see two possible solutions :

Analyze what happen with the mouse events in that particular case, and try to find a way to prevent the blinking effect
Otherwise, we still could position the tooltip at the opposide side of the mouse (only for this special case when a tooltip is open at the bottom right corner).

I will try to take a deeper look asap, but of course, feel free to suggest a pull-request for fixing it if you can !

Sherbert99 commented 6 years ago

Hey, just wanted to mention an additional fix I figured out to help the flickering issue. Changing the offset does fix the problem. But on small screen sizes I was still having the tooltips show under the mouse. So what I did was set pointer-events to none which makes the tooltip not recognize the mouse. So as long as they keep the mouse on the country they hovered over, the tooltip will stay showing. Only issue is if the mouse is blocking something in the popup they can't move the mouse away on smaller countries. But can't hurt to add this to your fix. Just add this style.

.mapTooltip {

    pointer-events: none; 
}

UPDATE: I just noticed one issue. On iPhone when you touch the tooltip it won't close the tooltip unless the tooltip is over the map. This is since it's ignoring the pointer on the tooltip. Too bad, otherwise this would have been a nice fix. Chrome on Android works fine.

neveldo commented 6 years ago

Hello @Sherbert99 , Thanks for sharing your fix. Despite the issues you have mentioned, I think it could be a very interesting way to be explored for solving this blinking problem !