Tooltip for each cell and header

[pspra...@gmail.com]

I want to show tool-tip for each cell and column header. Can you please guide me how to do.

Thanks,
Prabhu

[Stephan Nicholls]

I don't think Handsontable provides this functionality and you will have to use an additional component. I am using Bootstrap so just used the popover functionality it provides. Each cell I want the hoverover in gets a unique class (as that's easy to do in the 'cells' initialization) and then initialize the popover:

$(".Qu" + col).popover({ html: true, container: 'body', placement: 'left', trigger: 'hover', content: 'The Text' });

Note that specifying the container as 'body' makes sure the popover appears over the top of the table.

Hope that helps,

Steph

[PRABHU P.S]

Hi,

I got it. This can be done in 2 ways.

1) Using afterOnCellMouseOver event. 

afterOnCellMouseOver = function(event, coords, tableData) {

 tableData.title = "tool tip";

}

2) Implement render and set the title as like above.

Handsontable will render the data and show the tool-tip. Handsontable - You are awesome.,.. 

Chears,

Prabhu

[rol...@gmail.com]

Couple of things to note here about the suggested use of afterOnCellMouseOver:
https://github.com/handsontable/handsontable/issues/2825
https://github.com/handsontable/handsontable/issues/2744

The other thing is that, I looked at was setting the colHeaders: up as a function

colHeaders: function (col) {
var txt;

switch (col) {
case 0:
return '<b>My 1st Column</b>';

case 1:
return '<span title = "my comment">My 2nd Column</span>';

case 3:
return '<p title = "my comment">My 3rd Column</p>';

}
},

just as examples. However, any of these will mean that sorting for that column will not work (if you care about that).