JSFiddle - React, Tailwind, and code Playground

HTML

<span>jQuery qtip tooltip</span>
<form>
     <div id='example'></div>
      <br />
     <input type="button" value="Save"></input>
</form>

CSS

</style>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css" rel="stylesheet" />
<link href="http://handsontable.com//styles/main.css" rel="stylesheet">
<link href="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.css" rel="stylesheet">
<script src="http://handsontable.com//bower_components/handsontable/dist/handsontable.full.js"></script>

<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}
div#basic_example { 
   border: 5px solid #ccc;
    
}

JavaScript

var data = [

  ["1", 'very long description very long description very long description']
];

function customRenderer(instance, td, row, col, prop, value, cellProperties) {
    if (value && value.length > 20) {
            var display = value.substr(0, 20);
            td.innerHTML = display;
            return;
    }
    Handsontable.TextCell.renderer.apply(this, arguments);
    
};

function handleAfterOnCellMouseOver(events, coords, tableData) {
    delay(function() {
        			var tableContents = $(tableData).text();
        			if (tableContents && typeof tableContents === 'string') {
                        
    					if (tableContents.length >= 20) {
                            var tooltipContents = "Someaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa random help text";
    						var divContents = '<div STYLE="white-space:normal">' + tooltipContents + '</div>';
	    					var tipProperties = 
	    			    	{
	    			    		overwrite: true,
	    			    		style: { tip: { corner: $.support.opacity } },
	    			    		position: {
	    			    			at: 'right center',
	    			    			my: 'left center',
	    			    			viewport: $(window)
	    			    		},
	    			    		show: { event: 'mouseover', ready: true, solo: true},
	    			    		hide: { event: 'mouseleave click focus unfocus', delay: 100 },
	    			    		content : divContents
	    			    	};
    						var qtip = $(tableData).qtip(tipProperties);
						}
						
    				}
				}, 1000);
};

var delay = (function() {
			var timer = 0;
			return function(callback, ms) {
				clearTimeout(timer);
				timer = setTimeout(callback, ms);
			};
		})();

var container = document.getElementById('example');
var hot = new Handsontable(container, {
  data: data,
  minSpareRows: 1,    
  rowHeaders: true,
  colHeaders: true,
    afterOnCellMouseOver : handleAfterOnCellMouseOver,
    
  columns: [{title: 'ID', width: '30'}, 
            {title: 'Description', width: 120, renderer: customRenderer}]
  
    });