Why keepTargetHover no working?

[Superatons23]

I am trying to keep the pointer while it is on the tooltip with the KeepTargetHover property but it does not give results, the code is the following.

 var tooltip = am5.Tooltip.new(root, {
          getStrokeFromSprite: false,
          getFillFromSprite: false,
          keepTargetHover: true, <----------------
        });
        tooltip.get("background").setAll({
          strokeOpacity: 1,
          stroke: am5.color(0x000000),
        });

        function makeEvent(date, letter, color, description) {
          var dataItem = dateAxis.createAxisRange(
            dateAxis.makeDataItem({ value: date })
          );
          var grid = dataItem.get("grid");
          if (grid) {
            grid.setAll({
              visible: true,
              strokeOpacity: 0.2,
              strokeDasharray: [3, 3],
              keepTargetHover: true,
            });
          }

          var bullet = am5.Container.new(root, {
            y: -100,
          });

          var circle = bullet.children.push(
            am5.Circle.new(root, {
              radius: 10,
              stroke: color,
              fill: am5.color(0xffffff),

              tooltipText: description,
              tooltip: tooltip,

              tooltipY: 0,
            })
          );

          var label = bullet.children.push(
            am5.Label.new(root, {
              text: letter,
              centerX: am5.p50,
              centerY: am5.p50,
            })
          );

          dataItem.set(
            "bullet",
            am5xy.AxisBullet.new(root, {
              location: 0,
              sprite: bullet,
            })
          );
        }

[martynasma]

Would you be able to post your whole chart and data on CodePen/jsFiddle so that we can test?

[Superatons23]

Would you be able to post your whole chart and data on CodePen/jsFiddle so that we can test?

https://codepen.io/Superatons/pen/oNqydKL

[martynasma]

Thanks!

The issue here is that your toltips have fill disabled, effectively making them transparent, and thus not receiving hover events.

If tooltip transparency is by design, you may just set fillOpacity: 0.001.

var tooltip = am5.Tooltip.new(root, {
  getStrokeFromSprite: false,
  //getFillFromSprite: false,
  keepTargetHover: true, 

});
tooltip.get("background").setAll({
  strokeOpacity: 1,
  stroke: am5.color(0x000000),
  fillOpacity: 0.001
});

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.

[fipa]

I'm having the same problem, even though I'm setting the fillOpacity on 1.

        var tooltip = am5.Tooltip.new(root, {
        });
        tooltip.get("background").setAll({
          fill: am5.color('#f4f4f4'),
          fillOpacity: 1,
          stroke: am5.color('#000000'),
          strokeOpacity: 1
        });
        tooltip.label.setAll({
          fill: am5.color('#222222')
        });

        var series = chart.series.push(am5xy.ColumnSeries.new(root, {
          xAxis: xAxis,
          yAxis: yAxis,
          openValueXField: "start",
          valueXField: "end",
          categoryYField: "category",
          sequencedInterpolation: true,
          tooltip: tooltip
        }));

Any suggestions?