[Maps] Improve tooltip experience with large amount of fields and/or metrics

[alexfrancoeur]

More and more, I find myself having a hard time to work with tooltips that have large amounts of data in them. Here's one of the most recent examples I've run into:

#41989 and #42249 are also somewhat related.

I really like the example @cchaos gave, viewing the full tooltip in a slide out. This definitely is a good experience for the mapping application itself, but I'd be interested in thinking through how this might look embedded in a dashboard. Would the same tooltip just slide out over the dashboard itself? Does embeddables support such interactions?

As we add more capabilities tooltips I think the way they're presented is really important. While I know we haven't discussed as a team, but it'd be nice to think about how we can improve this experience in a 7.x release. I thought I'd open this issue for brainstorm / discussion, interested in hearing the groups thoughts!

[elasticmachine]

Pinging @elastic/kibana-gis

[nreese]

I really like the example @cchaos gave, viewing the full tooltip in a slide out

The problem with a side panel is that you loose the ability to see all of feature properties while mousing over features. I would like to see us explore EUI tooltips instead of Mapbox tooltips as a first solution and see if that minimizes the problem.

Mapbox tooltips are bound to fit inside the map view container. This can be a really small area when the map is embedded in a dashboard. Using an EUI tooltip would allow the tooltip to be a top level DOM element and allow the tooltip to be outside of the map view area.

Using EUI tooltips would allow the tooltip to use the full screen size when calculating placement, giving use more freedom to make the tooltips wider instead of longer.

[alexfrancoeur]

The problem with a side panel is that you loose the ability to see all of feature properties while mousing over features.

Maybe we could do both? Something cool to consider is the additional enhancements we could add if we had more room to work with. We could begin thinking about embedding visualizations in the slide outs. Time series charts, pie charts, etc to provide quick context. Or even just simple text for additional context around what you're looking at. Yes, these enhancements could be done in the tooltip, but doesn't feel as clean.

I would like to see us explore EUI tooltips instead of Mapbox tooltips as a first solution and see if that minimizes the problem.

I think this is a good start as well. But it'd be nice if we go down this route if there was a "pop out" option. Even if you aren't bound by the DOM element, tooltips can still become pretty lengthy.

[nreese]

I think this is a good start as well. But it'd be nice if we go down this route if there was a "pop out" option. Even if you aren't bound by the DOM element, tooltips can still become pretty lengthy.

Agreed. Lets break this into 2 enhancements.

1. move tooltips into EUI tooltip component
2. allow users to configure side panel display fields. Side panel is opened via button in tooltip

[alexfrancoeur]

Had a great discussion with @miukimiu @nreese & @cchaos this morning. Next steps summarized below:

• We'll need to update the tooltip configuration to be a table, where rows can be resorted, allowing users to prioritize what fields are shown.
• We are thinking of tooltips as a summary or preview of data available and the fly out to view all of the data associated with the feature. Ideally the tooltip only shows 3 or 5 fields on a map and then you click into the fly out to see the rest. Pagination will likely be necessary in both views.
• For embeddability purposes, we are leaning towards keeping the fly out in context of the map itself rather than making it part of the global navigation (like inspector)
• We'll introduce a map (and/or layer) configuration option that allows you to customize the default number of fields that can be shown in a tooltip vs. the fly out
• This will likely be broken out into two PR's. One that is focused on resorting and label adjustments ([Maps ] custom labels for tool tip field names #37055) for the tooltip and another that add the fly out and tooltip field configuration. The EUI tooltip conversion will be pushed to a separate issue (to be opened)
• We're going to see where this fits as a priority during our planning week next week.

[nreese]

#61564 added scrolling when properties list exceeds 49% of vertical height.