search

gilbarbara / react-floater

Advanced tooltips for React
https://codesandbox.io/s/github/gilbarbara/react-floater/tree/main/demo
MIT License
213 stars 37 forks source link

Mobile behavior hover #25

Closed romanlex closed 6 years ago

romanlex commented 6 years ago

Example: On mobile phones when event is 'hover' and tooltip is a button what opening modal window I'm click on this button for opening modal and I have active tooltip.

gilbarbara commented 6 years ago

Sorry, I can't understand what you are trying to say.

gilbarbara commented 6 years ago

Are you trying to have a hover tooltip on an element that already has a click event? is that it?

If it is, you should use the target prop and add the tooltip without children "after" your button as showed in the demo.

<button className="modal-toggle" onClick={openModal}>Open Modal</button>
<Tooltip event="hover" target=".modal-toggle" content="This is the modal" />
romanlex commented 6 years ago

Are you trying to have a hover tooltip on an element that already has a click event?

Yes, you right

If it is, you should use the target prop and add the tooltip without children "after" your button as showed in the demo.

it's doesn't work https://codesandbox.io/s/vnx47lon7y

If you move button inside Tooltip and trying open modal on mobile when you see what tooltip is opened after tap on button

gilbarbara commented 6 years ago

ok, I'll take a look later

gilbarbara commented 6 years ago

Sorry, I gave you a wrong answer before... You can only use the tooltip without children in controlled mode.

I don't think adding event listeners to foreign elements like target is a good idea so I ended adding a disableHoverToClick prop that will prevent tooltips with hover type to use click on mobile. b94e7fcdde8433137b083075f07e2619008d5d85

It's published as 0.4.0.

If you need better control in your app you can use the controlled mode.