Tooltip in cell

Tags: #<Tag:0x00007f8b1dd5b8a8>
#1

Hi,

I have a text column where user can enter comment. Requirement is to limit cell content to 64 characters, but to display whole comment on hover or in something similar way (tooltip or so).

I wanted to use comment feature, but I am getting error when I am hovering over cell with comment:

Uncaught TypeError: Cannot read property ‘offsetLeft’ of undefined
at C (handsontable.full.min.js:26)
at t.value (handsontable.full.min.js:31)
at t.value (handsontable.full.min.js:31)
at t.value (handsontable.full.min.js:31)
at e. (handsontable.full.min.js:31)
at handsontable.full.min.js:26
at u (handsontable.full.min.js:26)
at e.runLocalHooks (handsontable.full.min.js:26)
at e. (handsontable.full.min.js:31)
at handsontable.full.min.js:26

I have 20 different tabs, each tab has it own handsontable instance. It’s Angular 2 project, but HOT is plain javascript version.

Also, it’s not possible to delete content of the cell on delete.

Here is rendering function for comment cell:

> public comment(instance, td, row, col, prop, value, cellProperties)
>     {
>         if (value)
>         {
>             debugger;
>             if (value.toString().length > 64)
>             {
>                 let shortComment = value.toString().substr(0, 64) + "...";
>                 td.innerHTML = shortComment;
>                 cellProperties.comment = { value: value };
>             }
>         }

>         return td;
>     }
Show item description as tooltip when hover on item name
Add a tooltip in column header cell
#2

Hi @bestellungen

I have created a renderer that you can test at http://jsfiddle.net/8yk14pts/
It adds a title attribute of a DIV element to show the whole text in a tooltip and a slice method on the td.innerHTML content.
If a user wants to edit the comment it stays long.

1 Like
#3

Hi Aleksandra,

Thank you for your quick answer :slight_smile: It’s working like a charm. I did not notice that I need to call this one:

Handsontable.renderers.TextRenderer.apply(this, arguments);

One more question:

Is it possible to change my email address? This account was created for our sales department, because they ordered a component. It’s more convenient for me if I can receive all email notifications on my account.

Best regards
Marko Gordic

#4

Sure. Just send me the new credentials at support@handsontable.com

We don’t want your email address to be published at an open forum :slight_smile:

#5

Hi Aleksandra,

I have another question regarding this issue:

I am setting height of the spreadsheet by counting rows and multiply that by 26 (default height of row). I am doing this because I dont want to have vertical scrollbar.

Since we have this custom rendering for comment column, is it possible to somehow automatically resize container and spreadsheet to set new height?

Best regards
Marko

#6

Sorry, but there is no option like this yet.

A similar logic to this one:

counting rows and multiply that by 26 (default height of row)

should work well. You just need to update the height each time a cell with a custom renderer changes its size. The easiest way will be to just use the afterChange hook. The new height is available via getRowHeight method.

Demo http://jsfiddle.net/34gqftrz/

#7

Hi Aleksandra,

I tried to adopt your example to extend it in a way that I can iterate trough rows to get each row height, and then to adjust overall height of spreadsheet. However, this is not working (I am getting undefined for row height).

I my case, I have maximum number of rows set, so I know that for example, my table has 6 rows each time

Could you check it?

http://jsfiddle.net/34gqftrz/9/

#8

Hi @bestellungen

My bad! I forgot about the plugin. The getRowHeight method is a part of the autoRowSize plugin so we need to enable it first and then run the getPlugin method.

Here’s a new example http://jsfiddle.net/7b3hgkve/

Let me know if it works for you.

1 Like
#9

I believe that I can close the issue as there’s no update since 11th of July

#10