Custom Tooltip Disappears Behind Handsontable

Tags: #<Tag:0x00007f8b24138b00>
#1

Hi,

I am working to create a custom tooltip on the handsontable headers. I have the tooltip working, but when it appears it disappears behind the cell so does not get displayed entirely. Do you have ideas on how to get the tooltip to display in front of the handsontable? See jsfiddle:

http://jsfiddle.net/skg3yvb6/9/

Thanks a lot,
Nick

#2

Hi @nick

we have an example of the afterGetColHeader() hook to show HTML title that can be used as a tooltip https://jsfiddle.net/bago6vqz/2/ and here with a custom window in the afterOnCellMouseOver hook https://jsfiddle.net/63vumfnq/

#3

Thanks for this.

Is there not a way to get this to work purely through css, like I was doing in my example? I would think the z-index would work to bring the tooltip forward but that wasn’t working.

I was able to use afterOnCellMouseOver to partially work, the only problem with this is that when you enter the column header from above the table it does not trigger the afterOnCellMouseOver hook.

Thanks,
Nick

#4

In your case the element is trapped inside the header - here http://jsfiddle.net/L9srk58u/ (after adding height and top) we can see that is appears inside the header.

#5