I want to display the image popup on hover at the one of the header of handsontable

Tags: #<Tag:0x00007f8b1dcac560>
#1

Hi @aleksandra_budnik
I want to display the image popup on hover at the one of the header of handsontable.

self.handsontable=new HandsonTable(elem, { data:goodsData, colHeaders:[“Qty”,“Length”], sortIndicator:false, columnSorting:true, contextMenu:[‘row_above’,‘row_below’,‘remove_row’], renderAllRows:true, columns:[ { data: ‘Quatity’, type:‘numeric’, format:‘0’, width:‘40’, validator: emptyNumberValidator, readOnly:‘Disabled’ }, { data: ‘Length’, type:‘numeric’, format:‘0’, width:‘40’, validator: emptyNumberValidator, readOnly:‘Disabled’ }

] })

Can you please help…

#2

Hey @gugaliya90

you could use the afterOnCellMouseOver. The

afterOnCellMouseOver: function(e, coords, TD){
      if(coords.row < 0){
         // your code
      }
    }

will execute your code only when the user hovers over a column header.

#3

Thanks for your quick reply.

I am new to handsontabke so need more help… I tried using afterOnCellMouseOver as

fterOnCellMouseOver: function(e, coords, TD){
if(coords.row < 0){
return ‘’
}
}

But can’t get what I want.

I want to display image as a popup or tooltip when I hover at my one header

#4

Which header is the one to get the pop-up and what should be displayed (only the image)? When it should be hidden (when we hover over something else, close the pop-up with a button…)

#5

When we hover on header- “Length” only the image should pop up and hidden when we hover on something else.

#6

That’s sounds like a good and doable plan.

Can I ask you to share your lincense ID (or license email) with me at support@handsontable.com? I’d like to confirm your support plan.

#7

I don’t have licence ID.

#8

You can also send the email address of the person who bought the Handsontable license. Just please send the email, I do not want to share confidential data on forum.

#9