You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Nov 9, 2024. It is now read-only.
Open the "preview pane" in a new Chrome tab and enter responsive design mode. Responsive design mode causes your mouse movements & clicks to behave like touch events on a mobile device.
Click the "Hover / click me" box.
Actual Behavior
You should see a single message in the console: "mouseEnter". This means that the mouseEnter event has fired but mouseLeave has not fired. I have no idea why the browser triggers mouseEnter when simulating a touch device.
In the Sandbox, the mouseEnter does not actually cause the tooltip to show, and I'm not sure why this is. In two of my real applications, tapping a Tippy-wrapped element in responsive design mode does cause the tooltip to appear.
And since the mouseLeave event never fires, the tooltip stays visible until the user taps another element. This can be undesirable in some cases — for example, tapping the Tippy-wrapped element opens a modal dialog in my application, and the tooltip displays over top of the dialog.
Desired Behavior
I want to just disable the Tippy entirely on touch devices so that the tooltip only shows when hovering with a mouse. I can't figure out how to do this since the touch devices are triggering mouseEnter.
Additional Context
All testing done with latest versions: tippy.js 6.3.7 and @tippyjs/react 4.2.6.
The text was updated successfully, but these errors were encountered:
Thank you so much. I was so focused on the trigger prop that I completely missed touch. I would like to prepare a tiny documentation PR to clarify the behavior of trigger="mouseenter" and how this relates to the touch prop.
Since the docs state that the default is touch={true}, any idea why tapping the element in my CodeSandbox does not show the tooltip?
Repro Steps
Actual Behavior
You should see a single message in the console: "mouseEnter". This means that the
mouseEnter
event has fired butmouseLeave
has not fired. I have no idea why the browser triggersmouseEnter
when simulating a touch device.In the Sandbox, the
mouseEnter
does not actually cause the tooltip to show, and I'm not sure why this is. In two of my real applications, tapping a Tippy-wrapped element in responsive design mode does cause the tooltip to appear.And since the
mouseLeave
event never fires, the tooltip stays visible until the user taps another element. This can be undesirable in some cases — for example, tapping the Tippy-wrapped element opens a modal dialog in my application, and the tooltip displays over top of the dialog.Desired Behavior
I want to just disable the
Tippy
entirely on touch devices so that the tooltip only shows when hovering with a mouse. I can't figure out how to do this since the touch devices are triggeringmouseEnter
.Additional Context
All testing done with latest versions:
tippy.js
6.3.7 and@tippyjs/react
4.2.6.The text was updated successfully, but these errors were encountered: