Summary
When Elastic Charts is rendered inside an agent flyout, the chart tooltip portal can appear behind flyout because the portal uses a relatively low z-index.
The Elastic Charts tooltip portal (echTooltipPortalMainTooltip) renders with z-index: 100, while Kibana's layout sidebar/flyout-adjacent chrome uses higher overlay levels, for example layoutLevels.sidebar = 1050 and EUI flyouts are around 1000. As a result, the chart tooltip can be clipped visually behind the Kibana overlay/chrome instead of appearing above the chart content.
Expected behavior
The chart tooltip should appear above the chart and the immediate overlay/container it is rendered within, even when the host application uses flyouts/sidebars with z-index values above 100.
Summary
When Elastic Charts is rendered inside an agent flyout, the chart tooltip portal can appear behind flyout because the portal uses a relatively low z-index.
The Elastic Charts tooltip portal (
echTooltipPortalMainTooltip) renders withz-index: 100, while Kibana's layout sidebar/flyout-adjacent chrome uses higher overlay levels, for examplelayoutLevels.sidebar = 1050and EUI flyouts are around1000. As a result, the chart tooltip can be clipped visually behind the Kibana overlay/chrome instead of appearing above the chart content.Expected behavior
The chart tooltip should appear above the chart and the immediate overlay/container it is rendered within, even when the host application uses flyouts/sidebars with z-index values above
100.