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

[tkajtoch]

I've reread our discussions on Slack and here and wanted to post an answer here as well. Adding a hover trigger to EuiPopover isn't something we like to add as an official option due to accessibility concerns. It's technically possible to achieve this effect programmatically by controlling the isOpen prop, but EuiPopover won't handle accessibility features for you (like detecting keypresses) when you do that, so we can't recommend that.

We are exploring the other solution to your problem which is modifying EuiDataGrid's column header to not open its context menu on header click but only when the dots icon button is focused. This way, you could hopefully achieve similar results while keeping it accessible. We'll keep you posted!

[cee-chen]

CC @MichaelMarcialis - any design suggestions here?

[MichaelMarcialis]

CC @MichaelMarcialis - any design suggestions here?

@cee-chen: Regarding the notion of a hover action triggering the appearance of a popover? Or regarding @tkajtoch's proposal for the EuiDataGrid headers?

Speaking personally, I'd like to avoid supporting hover actions for popovers. It muddies the waters too much between the tooltip and popover components. Beyond the accessibility concerns that @1Copenut already provided, I'd prefer we keep hover events for tooltips and click events for popovers to ensure consistency/predictability for users across Kibana and to prevent scenarios where we are placing actionable content in hover-based elements (creating a potentially frustrating user experience).

@achyutjhunjhunwala: You stated above that the current tooltip component limits content customization. Would you mind elaborating on that? Assuming the content that it is meant to house isn't actionable, why couldn't we house the "Resources", "Content", and "Actions" popover contents from your screenshot in the existing tooltip component? The tooltip's content prop accepts a ReactNode.

As for @tkajtoch's proposal for changing the click to be only on the icon button rather than the whole header, I think that makes sense and would be a good change.

[tkajtoch]

I'm going to create an issue to update EuiDataGrid column header to trigger opening the context menu on icon click. Thanks y'all for your feedback!

[tkajtoch]

I've created #7660 to cover the work required for this effort and assigned it a medium priority. Let me know if this should be a higher priority!

[tkajtoch]

We're closing this issue since it no longer covers what needs to be done. Please refer to the newly created issue linked above for more details.

[achyutjhunjhunwala]

@MichaelMarcialis I was on paternity leave and hence couldn't reply earkier. I guess i missed the fact that Tooltip takes ReactNode also as a prop. But i really like the idea @tkajtoch suggested. That should solve the problem