tooltip appears on click and is not dismissed on iOS mobile

[mwilc0x]

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"

[ItsTarik]

Hello and thanks for the solution proposed! I don't understand why this is not implemented inside the library yet ? It was not too simple to test the up-voted solution already, I'm using nextjs and i used this approach in a customized global instance:

import { useEffect, useState } from 'react';
import ReactTooltip from 'react-tooltip';

export const ToolTip = () => {
  const [isMobile, setIsMobile] = useState(true);

  useEffect(() => {
    setIsMobile(/iPhone|iPad|iPod|Android/i.test(navigator?.userAgent));
    // alert(/iPhone|iPad|iPod|Android/i.test(navigator?.userAgent));
  }, []);

  if (isMobile) {
    return null;
  }

  return (
    <>
      <ReactTooltip
        className="tooltip"
        effect="solid"
        delayShow={300}
        border={true}
        // globalEventOff={isMobile ? 'click' : undefined}
      />
    </>
  );
};

[danielbarion]

Hi guys, can someone do the PR with the fix, please?

Also, I'll add the label of V5 to let this one be tracked while we develop the V5 from scratch, thanks!

[danielbarion]

Hi, can someone test the alpha release of V5 and let me know if this issue still happens, please?

https://react-tooltip.com/docs/getting-started

I'll close this issue in few days of no one answer :)

[fiorins]

Hi, can someone test the alpha release of V5 and let me know if this issue still happens, please?

https://react-tooltip.com/docs/getting-started

I'll close this issue in few days of no one answer :)

It is still present in my react-tooltip code with the latest stable version

[gabrieljablonski]

@fiorins Please open a new issue providing a reproducible sample.