[Tooltip] A11y and interaction improvements

[kongsgard]

trafficstars

I've listed a few suggestions below on the tooltip interaction.

• [ ] Trigger the tooltip when hovering points on the edge of the chart

  • The hover area for points along the edge of the chart (for instance along the x- or y-axis) is reduced as the tooltip is triggered only when hovering inside the chart. This can be experienced in the examples in the documentation. Is there a way to improve this behavior?

• [ ] Accessibility for the tooltip onClick prop

  • It would be nice to be able to tab between each of the elements when this prop is set.

• [ ] Optionally set the tooltip to be persistent (like a popover) on click

[techniq]

@kongsgard This is all great feedback and has been on my mind

• Trigger the tooltip when hovering points on the edge of the chart
  • This is a little tricky since padding is used for the axis "gutters". Based on the tooltip mode (ex. bisect-x) this should be possible, and mostly comes down to increasing the width of the container in TooltipContext, but there would need to be more thought to make sure it wouldn't case regressions / unexpected results, if it should be something you opt-into, and can it work for all modes (not sure it could for band off the top of my head).

---

• Accessibility for the tooltip onClick prop
• Optionally set the tooltip to be persistent (like a popover) on click
  • Agree. I've seen projects like data-ui do similar and would be a great accessibility and usability win.

---

Exploration:

• Rechart's accessibilityLayer (see Accessibility on storybook)
• https://www.highcharts.com/docs/accessibility/accessibility-module
  • https://www.highcharts.com/demo#highcharts-demo-accessibility
• https://www.chart2music.com/docs/
• https://github.com/plouc/nivo/issues/126