Component `Hover Card` does not respect inner containers

[Pavelas]

Bug report

Current Behavior

At the moment component Hover Card is working only based on the viewport and there are some edge cases where it stops working if we're trying to use it inside inner scrollable containers.

Demo 👀

Screen.Recording.2022-06-03.at.16.49.30.mov

I found a temporary solution, however it does not solve the issue itself:

1. Add portalled={false} to HoverCard.Content component.
2. Add z-index: 0 to HoverCard.Content component.
3. Add background-color as well as z-index: 1 to containers above and below.

Demo 👀

Screen.Recording.2022-06-03.at.16.50.05.mov

As you can see it solves the issue, but this approach leads to another bug. We're losing avoidCollisions and collisionTolerance features. The card itself is being hidden, however it does not avoid collisions anymore and being invisible, the result is bad UX.

Expected behavior

HoverCard component should respect inner container boundaries and try to avoid collisions.

Suggested solution

I guess there are few solutions and I would be more than happy to contribute and fix it by myself, but I am not sure which solution is the best.

1. Hide HoverCard.Content component on scroll. I am not sure about this one, because we should make sure that we're not scrolling for example inside HoverCard.Content component. Also I am not sure if it should be working like that by default, maybe we should just simply add additional prop?
2. Add ability to pass the reference of parent container, in this case, HoverCard.Content component would respect container boundaries instead of viewport. I'm not sure if this solution can be easily implemented.
3. Your suggestions? 💡

[andy-hook]

Hi @Pavelas , thanks for raising and providing the helpful description. Of your suggestions I like option 2 for providing more flexibility in the collision detection:



Add ability to pass the reference of parent container, in this case, HoverCard.Content component would respect container boundaries instead of viewport.

Though that wouldn't solve the layering out of the box, and would be quite tricky to implement probably requiring a bit of work on the underlying positioning code.



In terms of your use case, can I ask what type of content you have in those cards? does it need to be interactive? only from the video they look like good contenders for Tooltip which do already hide on scroll.

[benoitgrelard]

In terms of your use case, can I ask what type of content you have in those cards? does it need to be interactive? only from the video they look like good contenders for Tooltip which do already hide on scroll.

I was going to suggest exactly the same thing.
On top of that, you could alleviate the other issues by placing the tooltip on the "right" of the chat bubble.

[Pavelas]

Hi @andy-hook, thank you for quick response. I would love to use Tooltip, however in this case I have clickable content inside tooltips. Also some of those tooltips will include a bunch of scrollable content. For this reason, Tooltip component wasn't appropriate choice for me.

@benoitgrelard, thanks for the comment! As I mentioned before, Tooltip component is not flexible enough and content inside Tooltip is not clickable. Placing the tooltip on the "right" is just a workaround and not the solution.

Should we update Tooltip component instead? And add the following props: openDelay, closeDelay?

[benoitgrelard]

I would love to use Tooltip, however in this case I have clickable content inside tooltips. Also some of those tooltips will include a bunch of scrollable content. For this reason, Tooltip component wasn't appropriate choice for me.

Tooltip shouldn't be used for interactive content so if you have any that isn't the right choice. It just didn't look like it in your chat example. However, be careful not to gate content behind HoverCard as it's only supposed to be used for information that is already accessible behind the link it's attached to (the content inside the hover card is not accessible to keyboard users). The most accessible pattern would be Popover with its own trigger.