Regions block tooltip

[adschm]

Setup:

• Line-plot with timeseries x data
• Regions based on x-values
• default tooltip

Problem:

• The tooltip is not available for data-points "behind" the regions

This can be easily fixed by adding pointer-events: none to the .bb-region class or a custom class used for the regions.

Having solved this locally, I wonder what would be a good approach to address this by default:

1. Put regions "behind" the other plots. To me this would be the better option anyway, as this also allows to still see the plots when opacity for the regions is 1.
2. Have pointer-events: none for regions by default. The number of people wanting to use a tooltip inside regions might be much bigger than those wanting to bind a pointer-event to a region itself. However, having this setting differently by default for specific elements might still be counter-intuitive for the few that want to do the latter.
3. Keep the current state. While not optimal, the issue is easy to fix locally and we won't break behavior for existing setups. However, tooltip is broken for default new users in the scenario as described.

Further setup background:
D3 v6.7.0, billboard 3.0.3, data via json url, multi y, single x, regions are set separately by chart3.regions(data); from another json

[netil]

Hi @adschm, the current implementation make regions' <rect> elements to be positioned behind the chart elements.

I made an simple timeseries example with x Axis based region.

• https://jsfiddle.net/netil/j3hoa51v/3/

As you can see the <rect> element is behind the line's <path> element.

Can you share reproducible example code?

[adschm]

The difference in my scenario is that I load the regions separately after the chart, i.e. I first set up the chart and then just call chart.regions(data) later. The separate commands are necessary as I need to show or not show regions based on user choice (which also involves loading additional data).

This is easily reproducible based on your example by just having the regions loaded separately:
https://jsfiddle.net/adschm/9sbegdfn/2/

-> Now the tooltip is blocked.

(This is my first time creating anything with jsfiddle, so I hope the link is working).

[netil]

@adschm confirmed the issue. I'll do the fix.

[adschm]

Fix confirmed. Thanks for taking care.