Tooltips Faq

Making a tooltip

To make a tooltip you will need to listen to the fin-cell-enter event like so

grid.addEventListener('fin-cell-enter', function(e) { 
 var cell = e.detail.gridCell; 
 console.log('fin-cell-enter', cell.x, cell.y); 
}

This will give you the cell coordinates where the mouse event is currently hovered. You can then set the 'title' attribute of the Hypegrid container to enter text that will display a native browser tip below the mouse location, like so.

grid.addEventListener('fin-cell-enter', function(e) { 
 var cell = e.detail.gridCell; 
 grid.setAttribute('title', 'I'm a tooltip'); 
 console.log('fin-cell-enter', cell.x, cell.y); 
}

Known Chromium Bug

If say for example you want to use the same text for every cell in column. It is important to be aware of the following Chromium bug. In short, if the title attribute is reassigned with the same text, it will not reposition to the new cell.

The following code will not reposition the tooltip as you move from cell to cell since the text is being set to "I'm a tooltip"

grid.addEventListener('fin-cell-enter', function(e) { 
 var cell = e.detail.gridCell; 
 grid.setAttribute('title', 'I'm a tooltip'); 
 console.log('fin-cell-enter', cell.x, cell.y); 
}

A workaround is to flush the entry of the title attribute before reassigning it to the text you want

grid.addEventListener('fin-cell-enter', function(e) { 
 var cell = e.detail.gridCell; 
 grid.setAttribute('title', ''); 
 setTimeout(function(){ 
   grid.setAttribute('title', 'constant'); 
 }, 0); 
}); 

Alternatively it may be worth investigating your own CSS based tooltips.

Happy tool-tipping!