Popover style component which can be displayed on Hover

[achyutjhunjhunwala]

Summary

We have quite some requirements where we want to use a popover on a hover action rather than onClick. I understand from the EUI guidelines that Tooltip should be used for hover actions and Popover for click.

But sometimes we have situations where a click action on the item is already triggering an action and we cannot allow click for popover. For example, the Datatable header, we want an icon to appear on the header which should onHover render the popover but the datatable header already has an onClick action.

Why we cannot use a tooltip in that case ?

Because the tooltip limits us around customisation of the content we want to render.

Considerations

@1Copenut Highlighted some very good points, listing them here

1. I've been seeing a mixture of click and hover || focus tooltips and popovers lately that both use icons as their triggering element. This feels confusing from a UX perspective. I have an opinionated expectation that any icons like the ? are hover/focus tooltips and bigger popovers with more information and focusable elements should be something else visually.
2. An element that triggers on click AND hover || focus is going to cause friction. That's a hot take, but not a completely unfounded one. EuiPopover is wired to listen for the ESC key to close and return focus to its trigger. EuiTooltip does not have this because it's a mousein || focus in and mouseout || blur out behavior. Conflating the two could exacerbate a situation I've been seeing where we have popovers in modals and I press ESC thinking it'll close the popover and it closes the popover and the modal instead.
3. The screenshots are very helpful to understand the use case. The information density is high in the third screenshot where theres' an ...Actions menu at the bottom. It may be a UX item where we assign a different visual to these more dense popovers as a cue that they're different than tooltips with different handling.

Screenshot of Use Case

Figma Link