Final with Multiple Tooltips visible

Highcharts Tooltip custom functionality

by Muhammad Mushtaq Sheikh

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id="container"></div>

CSS

#container {
  min-width: 500px;
}

JavaScript

(function(H) {
  H.wrap(H.Tooltip.prototype, 'hide', function(defaultCallback) {
    //alert();
    //if ( /* .. */ ) {
    ////Do Nothing (Do Not Hide)
    //} else { // Call the default Hide Callback
    //defaultCallback.apply(this);
    //}
  });

  H.wrap(H.Tooltip.prototype, 'click', function(defaultCallback) {});
}(Highcharts));

var openTooltips = [];
var tooltipEnabled = true
var cloneToolTip = null;

var chart = $('#container').highcharts({
  title: {
    text: 'Worn% by SMR'
  },
  events: {
    load: function() {}
  },
  plotOptions: {
    series: {
      stickyTracking: false,
      point: {
        events: {
          mouseOver: function() {
            if (cloneToolTip) {
              chart.container.firstChild.removeChild(cloneToolTip);
              cloneToolTip = null;
            }
            if (openTooltips.indexOf(this) > -1) {

              this.series.chart.update({
                tooltip: {
                  enabled: false
                }
              });

              openTooltips = [];
            } else {
              openTooltips = [];
              openTooltips.push(this);
              this.series.chart.update({
                tooltip: {
                  enabled: true
                }
              });
            }
            chart.tooltip.refresh(this);
          }
        }
      }
    }
  },
  xAxis: {
    labels: {
      format: '{value:,.0f}'
    },
    title: {
      text: 'SMR',
      style: {
        'fontSize': '16px',
        'color': '#000000',
        'fontWeight': '600'
      }
    }
  },
  yAxis: {
    title: {
      text: 'Wear %',
      style: {
        'fontSize': '16px',
        'color': '#000000',
        'fontWeight': '600'
      }
    }
  },
  series: [{
    name: 'LHS',
    data: [
      [1000, 13],
      [2029, 28],
      [3121, 36],
      [4165, 45],
      [5467, 57],
      [7298, 75],
      [8897, 89],
      [9876, 95],
    ]
  }],
  tooltip: {
    enabled: true,
    snap: 0,
    formatter:...