Links inside tooltip

[elias-fadeyev]

Reproduction demo

https://codesandbox.io/s/1q9yy1342j

Steps to reproduce the problem

1. Click on the trigger
2. Click on the link

What is the expected behavior?

I think click trigger should allow events inside the tooltip

What went wrong?

The link doesn't follow the URL.
Click on the link triggers _this.handleOutsideClick() and then it calls event.preventDefault().

Any other comments?

Do we have any possibility to avoid this?
Or wouldn't it be a good idea to add outsideClickHandler to props?

Packages versions

• react-popper-tooltip: 2.8.1

[mohsinulhaq]

Please try out v2.8.2 which has a potential fix.

[elias-fadeyev]

Now it works, thank you!
As a related issue, is it possible to change click listener to mousedown for outsideClickHandler? We use this tooltip inside a drag'n'drop container and, if we move the container, outsideClickHandler doesn't trigger and, as a result, the tooltip stays shown outside of the container.

[mohsinulhaq]

Does it close when you drop the container?

[elias-fadeyev]

No, in our case click is not triggered after dropping and it stays opened, only mouseup is fired.

[mohsinulhaq]

I attach a click handler to document to handle outside click, whenever the tooltip opens. Do you know how is that not triggered? Is your mouseup or mousedown handler stopping propagation to the click handler? Basically, what I mean is that the outside click mechanism should just work irrespective of what drag action you are doing because click event is always triggered.

[elias-fadeyev]

Yep, we are using react-sortablejs and it seems that it stops propagation inside mouseup handler, if an order of elements has been changed. That's why we don't have click event now, but I think it's not a big deal. I mean isn't it a strange behavior of a tooltip to stay at the same place, when the container is moved to an opposite side of the window, even if it will be hidden after that?

[denisborovikov]

@elias-fadeyev Did you try to play with usePortal/portalContainer props? Tooltip can be attached to the draggable element instead of the document body. In this case, it should move with the appropriate container.

[elias-fadeyev]

@denisborovikov. Agree, but then this tooltip will be restricted to have the body only inside the container. It won't work for a big tooltip.

[denisborovikov]

@elias-fadeyev Does outer container have overflow: hidden? You can try to apply overflow on the inner part of the draggable element so the mutual wrapper won't cut the tooltip.

[elias-fadeyev]

@denisborovikov my fault, you are absolutely right! Unfortunately, a big tooltip now works as a handle and I can use it to drag'n'drop the container, as a part of it) I'll try to find the solution for preventing this behavior. Thank you