Tooltip Tap Hold Issue on touch screen windows OS devices

Questions
1

For mobile users or users who use touch screen laptops they have to tap and hold the tooltip in order to read them.

If a user taps on one of my tooltips and holds it for more than 1-2 seconds then lets go they see a popup similar to when you right click on a webpage. Does anyone know how to block this contextmenu popup? The popup works great as long as you don’t hold down more than 1-2 sec. I have long tooltips and the user has to hold for more than 1 sec to read them. I’m testing on a touch screen laptop running Windows 10.

Can the tooltip stay visible for x seconds after touch/click?

I have read that I can disable the right click contextmenu using some js but is this needed or is there another solution?

Thanks!

2

Yes, you can:

  • disable it by passing disableContextMenu: true app parameter, but it will be disabled on everything
  • do it manually on required elements (e.g. with adding contextmenu event handler)
  • try also set user-select: none CSS rule on required elements
3

is there a way to click the icon on ios and it stays until the user clicks somewhere else?
I have the following code:

useEffect(() => {
    iconTooltip.current = f7.tooltip.create({
      targetEl: '.icon-tooltip',
      text: 'Language for controlling the app during a match',
    });
  },[]);

<Icon className="icon-tooltip" ios="f7:info_circle_fill" md="material:info" size={20} />