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

[sonnyrick-cruz]

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 💯 👍

[neveldo]

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 : #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]

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]

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 !