Tooltip

Tooltip.new(root, settings)

const tooltip = Tooltip.new(root, {});
tooltip.label.set("fontSize", 14);

updateBackgroundColor(): void

import { Tooltip } from "@amcharts/amcharts5";

const tooltip = Tooltip.new(root, {
  labelText: "Value: {value}"
});

series.set("tooltip", tooltip);

const htmlTooltip = Tooltip.new(root, {
  labelHTML: `
    <div style="padding: 10px;">
      <strong>{category}</strong><br/>
      Value: {value}
    </div>
  `
});

const styledTooltip = Tooltip.new(root, {
  labelText: "{category}: {value}",
  getFillFromSprite: false,
  autoTextColor: false
});

styledTooltip.get("background").setAll({
  fill: am5.color(0x000000),
  fillOpacity: 0.8
});

styledTooltip.label.setAll({
  fill: am5.color(0xffffff),
  fontSize: 12
});

const fixedTooltip = Tooltip.new(root, {
  labelText: "Always points up",
  pointerOrientation: "up"
});

const animatedTooltip = Tooltip.new(root, {
  labelText: "{value}",
  animationDuration: 300,
  animationEasing: am5.ease.out(am5.ease.cubic)
});

const accessibleTooltip = Tooltip.new(root, {
  labelText: "{category}: {value}",
  labelAriaLabel: "Category {category} has value {value}",
  readerAnnounce: true
});

const interactiveTooltip = Tooltip.new(root, {
  labelHTML: '<a href="#">Click for details</a>',
  keepTargetHover: true
});

// On a series
const series = chart.series.push(
  am5xy.ColumnSeries.new(root, {
    tooltip: Tooltip.new(root, {
      labelText: "{category}: {valueY}"
    })
  })
);

// On individual data items
series.columns.template.set("tooltip", Tooltip.new(root, {
  labelText: "Value: {valueY}"
}));