Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] - Tooltip not working on mobile #3245

Open
busanTeddyBear opened this issue Jun 13, 2024 · 3 comments
Open

[BUG] - Tooltip not working on mobile #3245

busanTeddyBear opened this issue Jun 13, 2024 · 3 comments

Comments

@busanTeddyBear
Copy link

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)

Copy link

linear bot commented Jun 13, 2024

@busanTeddyBear busanTeddyBear changed the title [BUG] - Tooltip not working on mobie [BUG] - Tooltip not working on mobile Jun 13, 2024
@ShahirZain
Copy link

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.

@busanTeddyBear
Copy link
Author

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants