search

nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
21.32k stars 1.37k forks source link

[BUG] - Tooltip not working on mobile #3245

Closed jongcodes closed 1 month ago

jongcodes commented 2 months ago

NextUI Version

2.4.1

Describe the bug

The tooltip component is not working as expected on mobile devices

Clicking on a button does not trigger the tooltip message to appear. This issue persists even on the official NextUI website. https://nextui.org/docs/components/tooltip

Environments

OS : Android Browser : Samsung Internet 25.0.1.3

Your Example Website or App

https://nextui.org/docs/components/tooltip

Steps to Reproduce the Bug or Issue

  1. Click the button on the Tooltip component.

Expected behavior

A tooltip should appear as shown in the photo below.

Expected Bahavior

Screenshots or Videos

Tooltip not working on mobile.webm

Operating System Version

Android

Browser

Other (add additonal context)

linear[bot] commented 2 months ago

ENG-1007 [BUG] - Tooltip not working on mobie

ShahirZain commented 2 months ago

This is not a bug, The :hover pseudo-class in CSS is designed to apply styles to an element when the user designates it (most commonly by placing a mouse pointer over it). On traditional desktop environments, this works effectively. However, on responsive or mobile devices, there are some nuances:

Touch Devices: Most mobile devices are touch-based, and there is no "hover" state because there is no mouse pointer. Instead, a touch event is registered when a user taps on the screen. This means the :hover effect doesn't work in the same way as it does on desktops.

Emulated Hover: Some mobile browsers may simulate the :hover effect when a user taps on an element. For example, the element may enter the :hover state on the first tap, and the tap action may be executed on the second tap. This behavior can vary across different browsers and devices.

jongcodes commented 2 months ago

@ShahirZain I appreciate your response. Thanks to you, I now have a clear understanding of why this problem is occurring.

I was simply expecting it to work on mobile devices as well, like https://getbootstrap.com/docs/5.0/components/tooltips/

So, is this not a "BUG" but an intended behavior? Is there anything I should suggest to the Next UI Team?

jongcodes commented 1 month ago

I decided to use a popover as an alternative. https://nextui.org/docs/components/popover