React-tooltip: tooltip appears on click and is not dismissed on iOS mobile

[michaelwilcox]

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.

[Alfafc]

+1

[elodszopos]

@mjw56 could you please elaborate a little more on that potential fix?

[elodszopos]

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

[Ardhimas]

@elodszopos That causes the tooltip to never appear on mobile because clicking it triggers the eventOff and that's the only way to get it to show in the first place.

[huumanoid]

@Ardhimas that's weird.
Check out http://wwayne.com/react-tooltip/ -> "Custom event" -> left example.
Is it works for you on mobile? As for me, it does.

[Kerumen]

To everyone stumbling on this issue here is what I did to disable the tooltip on mobile:

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

<ReactTooltip disable={isMobile} />

This way, you don't have to update the lib and you can control the behavior on your side.

[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 } 
/>

[danielcb29]

Hey guys! I found a solution that works for me:

Handle tooltip close on iOS

globalEventOff={bowser.ios ? 'click' : undefined}

This tells ReactTooltip that the global event you want to hide the tooltip is click, for iOS

Handle tooltip open on any device because it didn't work on iOS

event='click'

This tells ReactTooltip that the event you want to open your tooltip on any device is click

Both as prop of ReactTooltip will solve the issue of open/close tooltip on iOS ;)

Remember include bowser as a dependency to check if you are currently on iOS.

[fatbattk]

_click_ does not work on iOS as expected. have to use _touchstart_ as @codenameyau suggested.

here's my solution:

• desktop showing tooltip on hover.
• mobile showing tooltip on click without testing UA.

data-event="touchstart focus mouseover"
data-event-off="mouseout"

globalEventOff="touchstart"