[BUG] Tooltips not working properly in mobile

[adventmedia]

Environment

• Hosting type
  • [ ] Form.io
  • [x] Local deployment
    • Version:
• Formio.js version: 4.14.4
• Frontend framework: React - @formio/react: 5.2.0

Steps to Reproduce

1. Create a form with a Panel component, add Tooltip text, select "Collapsible" and "Initially Collapsed" options
2. Viewing the form on a mobile device, tap the (?) tooltip icon

Expected behavior

Tooltip appears

Observed behavior

Panel opens (or closes)

If the collapsing behaviour is not selected, the tooltip does appear - though the tooltip is cut off by the right edge of the screen.

Additional issues The behaviour with collapsible panels is the most egregious, but generally tooltips function erratically or not at all. One fix that needs to be applied is to add stopPropagation() to the tooltip event handler (click for mobile). This may be enough to solve all observed problems.

• on the Checkbox component, clicking the tooltip also toggles the checkbox (tooltip also appears)
• on the Text Input and Number components, clicking the tooltip causes the input field to focus (tooltip does not appear)

[bojanapic]

Any news on this one?

[ZenMasterJacob20011]

Thank you for taking the time to report this issue. I was able to reproduce this on [email protected]. Created a ticket FIO-8259.