JSFiddle - React, Tailwind, and code Playground

by Alexandra Espichán

HTML

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

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

CSS

div.highcharts-tooltip {
  pointer-events: auto !important;
}

.highcharts-tooltip > span {
    display: block;
    height: 225px;
    width: 225px;
}

.highcharts-tooltip > span .center {
    text-align: center;
}

.highcharts-tooltip > span .img-block {
    width: 100%;
    height: 50%;
}

.highcharts-tooltip > span > .img-block > img {
     width: 50%;
     height: 100%;
}

.highcharts-tooltip > span > .center > .btn {
    display: inline-block;
    padding: 6px 12px;
    margin: 7px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 3px;
    text-decoration: none;
}

.highcharts-tooltip > span > .center > .btn-primary {
    background-color: #1ab394;
    border-color: #1ab394;
    color: #FFFFFF; 
}

.invisible {
  visibility: hidden !important;
}

JavaScript

// Start generating test data

function generateTestData(){
  var foto = "https://public.dm2301.livefilestore.com/y3p5FgdG5jXR0mBHbsU9fZcD0Irik9lzv_vfkeEvvP0Z0wQZfvJnANuzJkbuRcebO15SMZKXGfpp6b_57EP3Rlmrg/perritos%20y%20gatitos%20Leanyla12.spaces.live.com%20%2810%29.jpg?rdrts=163635251";

  var random_data = [];
  var pointsAmount = 100;

  for (var i = 0; i < pointsAmount; i++) {
  	var random_x = Math.floor((Math.random() * 100) + 1);
    var random_y = Math.floor((Math.random() * 100) + 1);
    random_data.push({
      employeeId: i,
      employeeFile: '#',
      employeeName: 'Alexandra Espichán',
      valueD: 140 * random_x / 100,
      valueP: 150 * random_y / 100,
      valueMaxD: 140,
      valueMaxP: 150,
      porcx: random_x,
      porcy: random_y,
      foto: foto
    });
  }

  var chart_data = [];

  for (var i = 0; i < random_data.length; i++) {
    var value = random_data[i];
    var tooltip_data = "<div class='img-block center'><img src='" + value.foto + "'></div>";
    tooltip_data += '<br /><b>' + value.employeeName + '</b>';
    tooltip_data += '<br />Desempeño: ' + value.valueD + '/' + value.valueMaxD + ' (' + value.porcx + '%)';
    tooltip_data += '<br />Potencial: ' + value.valueP + '/' + value.valueMaxP + ' (' + value.porcy + '%)';
    tooltip_data += '<br /><div class="center"><a class="btn btn-primary" href="' + value.employeeFile + '">Ver ficha</a></div>'

    chart_data.push({
      x: value.porcx,
      y: value.porcy,
      name: tooltip_data
    });
  }

  return chart_data;
}

var data = generateTestData();
// End generating test data

var clone_container = null;
var clone_tooltip = null;

function hasClass(element,cls) {
  return element.classList.contains(cls);
}

function clean_tooltip() {
	if (clone_container) {  chart.container.firstChild.removeChild(clone_container);
  	clone_container = null;
  }

  if (clone_tooltip) {
  	chart.container.removeChild(clone_tooltip);
    clone_tooltip = null;
  }
}

chart =...