Adding tooltip to ZoomOut Button

[dannycruz97]

Hello

I'm having trouble setting a tooltip for the ZoomOut Button

Through the documentation I know i can set it like this: chart.zoomOutButton.set('tooltipText', 'Click to zoom out');

But I need to customize it color wise. And I dont understand what I'm doing wrong here:

      let chart = root.container.children.push(
        am5xy.XYChart.new(root, {
          panY: false,
          wheelY: 'zoomX',
          layout: root.verticalLayout
        })
      );
      let zoomTooltip = am5.Tooltip.new(root, {
        pointerOrientation: 'horizontal',
        getFillFromSprite: false,
        getStrokeFromSprite: true,
        autoTextColor: false
      });

      zoomTooltip.get('background').setAll({
        fill: am5.color(0xffffff)
      });
      zoomTooltip.label.setAll({
        fill: am5.color(0x000000),
        text: 'Click to zoom out'
      });

      chart.zoomOutButton.set('tooltip', zoomTooltip);

Thanks !

[zeroin]

All looks fine, could you create a codepen so I could see full code?

[dannycruz97]

take this example: https://codepen.io/dannyalb/pen/OJeNNaY

[martynasma]

Adding tooltip to an object does not automatically make it display it on hover. Setting tooltipText does:

var zoomTooltip = am5.Tooltip.new(root, {
  pointerOrientation: 'horizontal',
  getFillFromSprite: false,
  getStrokeFromSprite: true,
  autoTextColor: false
});

zoomTooltip.get('background').setAll({
  fill: am5.color(0xffffff)
});
zoomTooltip.label.setAll({
  fill: am5.color(0x000000)
});

chart.zoomOutButton.setAll({
  tooltip: zoomTooltip,
  tooltipText: "Click to zoom out"
});

[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.