elastic / elastic-charts

https://elastic.github.io/elastic-charts/storybook
Other
372 stars 120 forks source link

Line annotation tooltip not visible even when `hideLinesTooltips` is set to false #2549

Open karosowka13 opened 1 month ago

karosowka13 commented 1 month ago

Describe the issue

When hovering line annotation the line annotation's tooltip doesn't show up. Only while hovering the marker the tooltip appears. Even with the hideLinesTooltips set to false and high zIndex. I also tried to disable tooltips with <Tooltip customTooltip={() => null} /> to ensure that tooltip with the value doesn't hide the annotation tooltip, but it didn't solve the issue.

To Reproduce See this codesandbox. Steps to reproduce the behavior:

  1. Hover over line annotation
  2. Hover over marker

Expected behaviour I would expect to see the line annotation tooltip when we hover over line.

Screenshots

https://github.com/user-attachments/assets/9507eef5-9222-4f70-b920-1374fa9d00f2

Version (please complete the following information):

markov00 commented 1 month ago

Thanks for submitting the issue, this is actually by design. I've changed the label to enhancement so we can track this request.

karosowka13 commented 1 month ago

Thanks a lot. What's hideLinesTooltips prop for then?

nickofthyme commented 3 weeks ago

@karosowka13 the hideLinesTooltips was added some time ago in #339 and the usage of it was removed in #418 but we clearly missed removing that from the types. I opened #2555 to remove hideLinesTooltips.

The original issue that hideLinesTooltips was attempting to solve, was how to nicely display both the main tooltip and the annotation tooltip at the same time, see #297. For the time being we simply settled on displaying the line annotation tooltip when hovering the icon and the rect annotation only when the main tooltip was not displayed. In such case where we want to display the rect annotation message in addition to the main tooltip, we manually inject the contents into the header.

Image

Our next step is to handle this collision better. We have ideas of how to do this such as that mentioned in https://github.com/elastic/elastic-charts/issues/615#issuecomment-994689359 and shown below.

Image

But this tooltip work is not our top priority at the moment.