Highcharts Legend Tooltips

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

$(function() {
  // Data for the chart
  var chartData = [
    [
      [1, 1],
      [2, 4],
      [3, 9],
      [4, 16]
    ],
    [
      [1, 1],
      [2, 2],
      [3, 3],
      [4, 4]
    ]
  ];

  // Markers for the chart
  var chartMarkers = [{
    symbol: 'circle',
    fillColor: '#000000'
  }, {
    symbol: 'square',
    fillColor: '#FF0000'
  }];

  // Fake references for the data
  var refs = {
    p1: 'Reference 1',
    p2: 'Reference 2'
  };

  // Chart options
  var chartOptions = {
    chart: {
      zoomType: 'xy',
      renderTo: 'container'
    },
    legend: {
      useHTML: true,
      // Label formatter function, we place the index of the datasets into the data-index attribute
      labelFormatter: function() {
        return '<span>' + this.name + '</span>';
      }
    },
    title: {
      text: 'Demo'
    },

    series: [{
      type: 'scatter',
      name: 'Ref 1',
      marker: chartMarkers[0],
      data: chartData[0]
    }, {
      type: 'scatter',
      name: 'Ref 2',
      marker: chartMarkers[1],
      data: chartData[1]
    }]
  };

  var myChart = new Highcharts.Chart(chartOptions);

  // JQuery UI tooltip with a hyperlink

  $('.abc').tooltip({
    content: function() {
      //                console.log(this);
      var t = parseInt($(this).get(0).attributes['data-index'].nodeValue) + 1;
      //                var x = $(this).get(0).attributes['data-index'];
      return refs['p' + t] + ' <a style="color: blue" href="#">hyperref</a>';
    },
    items: '.abc',
    position: {
      my: 'left bottom',
      at: 'right top'
        //                of: $('.abc')
    },
    show: null,
    close: function(event, ui) {
      ui.tooltip.hover(
        function() {
          $(this).stop(true).fadeTo(400, 1);
        },
        function() {
          $(this).fadeOut("400", function() {
            $(this).remove();
          })
        });
    }
  });

});