JSFiddle - React, Tailwind, and code Playground

by kdeemer

HTML

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

<div id="handsontable-container"></div>
<div class="tooltip" style="visibility: hidden"></div>

CSS

.tooltip {
  height:20px;
  color: grey;
  background: #fff;
  border: 2px solid #dedede;
  line-height: 20px;
  margin: 0 30px;
  box-shadow: 2px 2px 5px #ddd;
  z-index: 200;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    // Initialize Handsontable with minimal configuration
    var tooltip = document.querySelector('.tooltip');
    var columnTooltips = {

      1: 'Rainier',
      2: 'Baja',
      3: 'Alaska',
      4: 'Popo',
      5: 'Baja Kayak',
      6: 'Moab',
      7: 'Alaska II',
      8: 'Bozeman',
      9: 'Sierras',
      10: 'Costa Rica',
      11: 'Channel Is',
      12: 'Cuba',
      13: 'Belize',
      14: 'CO Kayak',
      15: 'Alaska III',
      16: 'MX Canyoneering',
      17: 'Snomobiling',
      18: 'Mt Whitney',
      19: 'Grand Canyon',
      20: 'Panama',
      21: 'Everglades',
      22: 'Riverboarding',
      23: 'Bloodvein',
      24: 'Klamath River',
      25: 'Iceland',
      26: 'Grand Teton',
      27: 'Mtn Biking',
      28: 'Toulumne River',
      29: 'Land Sailing',
      30: 'Colorado ATV',
      31: 'UT Canyoneering',
      32: 'Bayou Teche',
      33: 'Gila Wilderness'
      
    };
    
    var hot = new Handsontable(document.getElementById('handsontable-container'), {
      data: [
['Tom Aarts','','','','','','X','','','','','','','','','','','','','','','','','','','','','','','','','','','','1'],
['Richard Abbitt','','','','','','','','','','','','','','','','','X','','','X','','','','', '','','','','','','','','','2'],
['Ricardo Amador','','','','','X','','','','','X','','','','','','','','','','','','','','', '','','','','','','','','','2'],
['Dick Amtower','X','X','','X','X','X','','','X','','X','','X','X','X','','X','X','X','','X','','','', '','','','','','','','','','14'],
['John Anshus','','','','','','','','','','','','','','','','','','','X','','X','','','X','X','','','','','','','','','4'],
['Robert Antt','','','','','','','','','','','','','','','','','','','','X','','','','', '','','','','','','','','','1'],
['Chris Armbrust','','','','','','','','','','','','','','','','','','','','','','X','','X', '','','X','','','','','','','3'],
['Gene...