-
Notifications
You must be signed in to change notification settings - Fork 72
Trigger Tooltip on disabled elements #479
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
Conversation
Could solve it with CSS on the disabled element: pointer-events: none; |
disabled element, shown in the example below. This will help trigger | ||
the mouse events correctly. Unfortunately, this workaround overwrites | ||
the 'not-allowed' cursor. | ||
</Typography> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated the Storybook with a "Disabled element" example, with workaround for Safari browser for the developers to decide what to use.
onMouseOver={handleOpen} | ||
onMouseEnter={handleOpen} | ||
onPointerEnter={handleOpen} | ||
onPointerLeave={handleClose} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
onPointerEnter and onPointerLeave fixed the issue in Chrome.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great research work! 👍
Safari... 😞
Mouse Events on disabled elements are buggy.
This is a known issue on Safari and Chrome browsers. Testing in Firefox gives us the desired outcome.
Trying to find a workaround that goes for all browsers...