Clickable links in tooltips

Tooltips are used in a number of places to provide contextual information on a hovered/tapped object, like a Slice of a Pie Chart, or a country on a map. By default, tooltips are completely static with no way to interact with them. This tutorial will explain how you can make them interactive, adding clickable links to them.

Preparing tooltip

As we mentioned in the preamble, tooltips are completely "mute" to any interactions as to not steal hover events from elements underneath them. Even placing interactive elements, such as links, into content of tooltip will not work.

We'll need to prep up our tooltip first. This involves two steps:

1. Enabling interactivity of the tooltip's label element, by setting its interactionsEnabled = true (it's false by default).
2. Setting keepTargetHover to ensure that target element which tooltip is displayed for will remain hovered even if mouse pointer is on a tooltip.

Since every series on any chart type, has own tooltip, we can use that to set both of the above:

series.tooltip.label.interactionsEnabled = true;
series.tooltip.keepTargetHover = true;

series.tooltip.label.interactionsEnabled = true;
series.tooltip.keepTargetHover = true;

{
  // ...
  "series": [{
    // ...
    "tooltip": {
      "keepTargetHover": true,
      "label": {
        "interactionsEnabled": true
      }
    }
  }]
}

Setting content

Normally, we use tooltipText property of the chart elements to indicate what to display in a tooltip.

However, it does not support any way of adding links (or other interactive elements for that matter).

For this purpose we'll need to use tooltipHTML instead, which as the name suggests, will accept and display its contents in HTML.

Using HTML allows us adding any kind of rich content like images, and of course <a href> tags for links.

This is how it could look on a ColumnSeries:

series.columns.template.tooltipHTML = '<b>{category}</b><br><a href="https://en.wikipedia.org/wiki/{category.urlEncode()}">More info</a>';

series.columns.template.tooltipHTML = '<b>{category}</b><br><a href="https://en.wikipedia.org/wiki/{category.urlEncode()}">More info</a>';

{
  // ...
  "series": [{
    // ...
    "columns": {
      "tooltipHTML": '<b>{category}</b><br><a href="https://en.wikipedia.org/wiki/{category.urlEncode()}">More info</a>'
    }
  }]
}

Using in maps

This works exactly like that in MapChart's polygon series. However, there are a few more things to take care there.

Normally, a tooltip would show up at whatever position your mouse cursor is, or location of tap on a touch screen.

In our case this will not do, since we will never be able to hover the actual tooltip, it always trying to "move away" from the cursor. We need the tooltip to pop up in the middle of the target polygon.

For that we need to set polygon template's tooltipPosition to "fixed".

We also want it appearing in a "visual center" of the polygon, not geometrical one, so we'll need to enable visual center calculation for our Polygon series by setting its calculateVisualCenter to true.

polygonSeries.calculateVisualCenter = true;
polygonSeries.mapPolygons.template.tooltipPosition = "fixed";

polygonSeries.calculateVisualCenter = true;
polygonSeries.mapPolygons.template.tooltipPosition = "fixed";

{
  // ...
  "series": [{
    "type": "MapPolygonSeries",
    // ...
    "calculateVisualCenter": true,
    "mapPolygons": {
      // ...
      "tooltipPosition": "fixed"
    }
  }]
}

Examples

XYChart

See the Pen amCharts 4: Links in Tooltip by amCharts team (@amcharts) on CodePen.0

PieChart

See the Pen mYmGvP by amCharts team (@amcharts) on CodePen.0

MapChart

See the Pen amCharts 4: Links in tooltips by amCharts team (@amcharts) on CodePen.0