Tooltip is broken when `<svg>` is supplied with `viewBox`

[matwey]

Description

I am using billboard.js 3.9.4 and see the tooltip issue when I create the plot as the following:

      var viewbox_chart = bb.generate({
        data: { columns: columns, types: types },
        resize: { auto: false },
        size: { width: 320, height: 240},
        svg: {classname: "img-fluid w-100"},
        bindto: "#viewbox"
      });
      viewbox_chart.$.svg.attr("viewBox", "0 0 320 240");

Please note, that I attach viewBox attribute to the <svg> tag. This is done intentionally to achieve scaling behavior I want. When viewBox is set then the plot is scaled as a whole. Please mind the difference in the example below. I am not sure if this scenario is supported or not, but everything works fine except the tooltip. The tooltip does not appear at the mouse positions where it should and appears where it should not.

Steps to check or reproduce

Minimal example: https://jsbin.com/luzohuvita/edit?html,output

[netil]

Hi @matwey, the toolip positon's coordinate comes from the mouse event coordinate and it uses d3-pointer.
Try using tooltip.position option to set different position coordinate in this case.

[matwey]

Thanks. I am afraid tooltip.position won't help here. Because the issue is that the tooltip is not activated when mouse pointer is pointing to data point, instead it is activated when the pointer is pointing to some empty space.

[matwey]

It is still an issue for 3.10.3.

[matwey]

The issue is still persists in 3.11.1

[netil]

@matwey, would you like contribute fixing this?

[matwey]

I would but I am not sure how. I mean I don't understand what is the core reason for this behavior.