mobile

[ranran2121]

I have tried it on mobile and it doesn't work...or does it need extra coding?

[gabrieljablonski]

Hi Francesca. If you check the examples in the docs on your phone, it should work fine.

Can you create a CodeSandbox, or post some sample code with an example working on desktop, but not on mobile?

[danielbarion]

Hi @ranran2121, I tried yesterday on my wife's phone and it's working too

[chemometeclaj]

I cannot make the tooltip work on a touch screen.
It shows up after clicking e.g. a button but not on long press.

This is my code for the tooltip:

import React, { FC } from "react";
import { Tooltip as ReactTooltip } from "react-tooltip";

export interface TooltipProps {
  refId: string;
  place?: "top" | "right" | "bottom" | "left";
  delayShow?: number;
  children: React.ReactNode;
}

const Tooltip: FC<TooltipProps> = ({ refId, place = "top", delayShow = 500, children }) => {
  return (
    <ReactTooltip
      place={place}
      anchorSelect={`#${refId}`}
      delayShow={delayShow}
      variant="light"
      style={{ maxWidth: "96vw", padding: "4px 10px" }}>
      {children}
    </ReactTooltip>
  );
};

export default Tooltip;

[gabrieljablonski]

Can you provide a full example and maybe a video of what you're experiencing?

Here's an example on my phone on our docs page. Both the touch and long press work fine (aside from selecting the text on long press, but that's beside the point).

tooltip.2.mp4

[chemometeclaj]

Here is a video of the doc page.
I use chrome on an iPhone. First I touch "fast" (click-like) and secondly I long press.

RecordIt-3BF697E7-38C7-4657-82B2-8F36B9926B0C.mp4

[gabrieljablonski]

It might be a bad interaction with the user-select behavior for chrome on iOS.

Try disabling it on your tooltip anchor and let us know if that works.

https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#css

.unselectable {
  -webkit-user-select: none;
  user-select: none;
}

[chemometeclaj]

That prevents the selection of the text (also works by adding "user-select: none;" to the style on an element with a tooltip on the doc page)

Info: I get the same behavior in all tested browsers on iOS, and I get the behavior you show on Android.

I cannot avoid showing the tooltip on touch devices when touching the button fast "click like" with:
openEvents={{ mouseenter: true, focus: false, click: false, mousedown: false }}

For my project, I have decided to disable all tooltips on touch devices for now. However, it would be beneficial if options like onTouchStart and onLongTouch could be added to openEvents in the future.

In my opinion, the user experience on a touch device would be optimal if a tooltip on, for example, a button is displayed when a long press event is detected, and the normal onClick event for the button is canceled. Moreover, a quick tap on the button should not display the tooltip but should trigger the normal onClick event."

I hope this information will be useful.

Have a wonderful day!

[gabrieljablonski]

I don't think it makes sense for us to have custom logic to apply differently when the tooltip is running on a mobile device.

But having more options to allow you to set it up is definitely something we could do.

it would be beneficial if options like onTouchStart and onLongTouch could be added to openEvents in the future

Adding the touchstart event would only be useful if you want the tooltip to only show on mobile. Since that's a very niche use case, and you can already open the tooltip on mobile normally with mouseenter, I don't think this is something we should add right now.

Now for onLongTouch, since this isn't a default DOM event, we'd need some custom logic to achieve it. Though there is an alternative: using the contextmenu event, which effectively works as a "long touch" event on mobile.

In my opinion, the user experience on a touch device would be optimal if a tooltip on, for example, a button is displayed when a long press event is detected, and the normal onClick event for the button is canceled. Moreover, a quick tap on the button should not display the tooltip but should trigger the normal onClick event.

As mentioned above, this could be achieved easily with the contextmenu event.

Also, about this part: "and the normal onClick event for the button is canceled", we wouldn't need to "cancel" the click event, since it is never triggered on a long press on mobile.

---

@chemometeclaj do you mind opening a new issue with a feature request for adding the contextmenu event? We can do some beta releases there and you can give us some feedback if it works as expected.

Though keep in mind that even with us adding the contextmenu event, you'll need to detect the device yourself and switch between the open and close events, so you have the best experience for each device. It doesn't make sense for us to do that inside the tooltip.