Search code examples
javascripthighchartstooltip

How to add clickable HTML-link into tooltip in Highcharts 5.0.x?

I have following configuration for Highcharts tooltip:

    tooltip: {
        useHTML: true,
        style: {
            padding: 0
        },
        formatter: function () {
            return '<a href="http://google.com">' + this.x + ': ' +  this.y + '</a>'
        }
    }

Example: http://jsfiddle.net/maLqoyge/2/

The link inside the tooltip is visible but it seems not possible to hover mouse over it: the link doesn't get underlined and the mouse cursor does not change. It is also not possible to open the URL by clicking the link.

In Highcharts 3.0.10 similar tooltip still worked. Is it possible to make link inside a tooltip to function someway also in Highcharts 5.0.x?

Solution

  • You have to set tooltip.style.pointerEvents to 'auto'.

    tooltip: {
  useHTML: true,
  style: {
    padding: 0,
    pointerEvents: 'auto'
  },
  formatter: function() {
    return '<a href="http://google.com">' + this.x + ': ' + this.y + '</a>'
  }
},

    example: http://jsfiddle.net/zfwx6s9q/