tooltip appears on click and is not dismissed on iOS mobile

Hi,

First, thanks for this library!

I’m using this on iOS mobile, there are two issues I am noticing right now:

1. An element that is hovered over on the desktop browser and displays the tooltip, will show the tooltip when clicked on in mobile iOS

2. the tooltip that appears after the element is clicked does not go away without scrolling the page

I’m guessing this might have something to do with the event listeners, maybe it needs support for touch events? I can help troubleshoot, but wanted to submit this just in case anyone else has run into it and what the best solution would be.

This is reproducible with the example page by opening it in iOS simulator for iPhone. http://wwayne.com/react-tooltip/

Update 1: Doing something like:

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
    return;
}

in showTooltip fixes the issue. Not sure how you would feel about adding this.

Cheers.

[codenameyau]

There is a known issue with iOS safari where click events aren’t being fired on non interactive elements, e.g. divs and spans.

See: https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile

I used a combination of the solutions above and cursor: 'pointer' to solve this issue for me:

const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

<ReactTooltip 
  style={{ cursor: 'pointer' }} 
  globalEventOff={ isMobile ? 'touchstart' : undefined } 
/>

[elodszopos]

I solved this using globalEventOff={isMobile() ? 'click' : undefined} passed to the React-Tooltip component.