Add support for triggering popovers on hover, alongside the existing click or focus mechanisms.

[patpscal]

Is your feature request related to a problem? Please describe.

Currently, popovers cannot be triggered through hover events. However, some use cases, like desktop-oriented interfaces, can benefit from hover-triggered popovers to provide contextual information without requiring explicit action. This can improve usability by reducing friction for users needing quick insights before clicking.

Examples:

Data Visualization:
Showing details for data points when hovering over a chart. (Example from Grafana) This is already happening for Elastic visualizations.

Navigation:
Providing summaries or previews when hovering over link items. (Example from GitHub, VS)

How can Elastic benefit from this?

• Provides developers with more control over interaction patterns for popovers.

• Providing an overview on link hover before navigating could benefit users of the incoming entity-based model. Entities come with metadata attached, and having a quick summary before engaging could enhance the experience for some users. The same could be true for a host or a service. Currently, we do not have a pattern proposal yet for implementing this behavior, but we're exploring its application for some scenarios and we aim to facilitate a discussion to explore this possibility.

• This is already happening for Elastic visualizations. Instead of it being custom, we could allow it -> https://elastic.github.io/elastic-charts/storybook/?path=/story/annotations-lines--x-continuous-domain&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light

Basic guidelines that we could state for their effective use:

• Use hover popovers only for supplementary information, such as descriptions, explanations, or quick insights.
• Ensure the information is accessible elsewhere by providing an alternative way to access it (e.g., clicking through the trigger to access the complete information).
• Add slight delays to ensure intentional hover before displaying and to allow time for users to move the cursor to the popover without accidental dismissal.
• Content should be concise, digestible information without overwhelming the user.
• If an element is displaying a hover popover, it should always work this way. Example: if we assign this mechanism to, let's say, entities, users should expect the same behavior every time they check an entity link.

Desired timeline
Not urgent

[ryankeairns]

Note: Re-evaluate the third bullet. Can we not provide hover in addition to click?

[ryankeairns]

In response to the 'design decision' label, I view this addition as an enhancement presuming we retain existing interactions and, thus, meet a11y guidelines. I presume we would if this is additive / not the sole way of activating the popover.

Also, clear guidelines for using this versus tooltips should be provided alongside any solution (i.e. we don't want these being used as a workaround for EuiToolTip; different intent)

[acstll]

@ryankeairns I think it would be problematic to make it an enhancement without actually breaking that third bullet. The main reason for this is that the EuiPopover follows the Dialog pattern (namely, it's an element with role=dialog).

We currently have:

• EuiTooltip, that follows its own ARIA pattern, opens on hover/focus and cannot have interactive content
• EuiPopover, that follows the ARIA Dialog pattern, and requires a click

What would you think about introducing a new component, different from those 2?

Two libraries I consider quiet good have such component:

• Radix (in maintenance mode), has the Hover Card, "For sighted users to preview content available behind a link."
• Base (Radix' successor) has the Preview Card, "A popup that appears when a link is hovered, showing a preview for sighted users."

In summary, these:

• are mostly attached to links
• are invisible to screen readers
• do not follow any of those ARIA patterns

A new component would also make it easier to provide clear new guidelines, and differentiate it from tooltip and popover use cases.