Handsontable example

HTML

<script src="https://cdn.jsdelivr.net/npm/handsontable@12/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable@12/dist/languages/all.js"></script>


<div id="example1" class="hot handsontable"></div>

JavaScript

function myTooltipRenderer(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  td.innerHTML = '';
  var divMain = document.createElement('DIV');
  divMain.title = 'This is dummy tooltip';
  divMain.innerHTML = value
  td.appendChild(divMain);
}

let ctrl = {
  colHeaders: [],
  columns: [],
  data: []
};

ctrl.data = [{
    id: 1,
    name: 'John',
    status: 'active'
  },
  {
    id: 2,
    name: 'Miriam',
    status: 'active'
  },
  {
    id: 3,
    name: 'Antonio',
    status: null
  },
  {
    id: 4,
    name: 'Bartosz',
    status: null
  }
];


ctrl.colHeaders = [
  "Name",
  "Status",
];
ctrl.columns = [{
    data: "name",
    className: "htCenter htMiddle"
  },
  {
    data: "status",
    className: "htCenter htMiddle"
  }
]


var example1 = document.getElementById('example1');

var hot = new Handsontable(example1, {
  data: ctrl.data,
  contextMenu: true,
  colWidths: 100,
  licenseKey: 'non-commercial-and-evaluation',
  colHeaders: ctrl.colHeaders,
  columns: ctrl.columns,
  renderer: myTooltipRenderer
});