Handsontable example

by handsoncode

HTML

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


<div id="example1" class="hot"></div>
<div class="tooltip" style="visibility: hidden"></div>

CSS

.tooltip {
  height: 30px;
  color: grey;
  background: #fff;
  border: 2px solid #dedede;
  line-height: 30px;
  margin: 0 10px;
  box-shadow: 2px 2px 5px #ddd;
  z-index: 200;
  font-family: 'Arial';
  font-size: 12px;
}

JavaScript

let tooltip = document.querySelector('.tooltip');
  const example = document.getElementById('example1');
  
  const hot = new Handsontable(example, {
    data: Handsontable.helper.createSpreadsheetData(10, 10),
    colWidths: 100,
    width: '100%',
    height: 320,
    rowHeights: 23,
    rowHeaders: true,
    colHeaders: true,
    afterOnCellMouseOver: function(e, coords, TD) {
      setTimeout(() => { 
        if (coords.row < 0) {
            tooltip.style.visibility = 'visible';
            tooltip.innerHTML = `Tooltip for header index <b>${coords.col}</b>`;
            tooltip.style.position = 'absolute';
            tooltip.style.top = `${TD.getBoundingClientRect().y}px`;
            tooltip.style.padding = '5px';
            tooltip.style.left = `${TD.getBoundingClientRect().x}px`;
        }
      }, 500);  
    },
    afterOnCellMouseOut: function(){
      	 tooltip.style.visibility = 'hidden';
    }
  });