How to enable tooltips for autoflow in tables that have dynamic columns

💬 App Building
1

I have a table with dynamic columns enabled. Sometimes the data in these columns is too large to be contained within a cell. So I would like to be able to allow the user when hovering over the cell to see a tooltip with the entire data.

But I am not able to find the option to enable tooltips for dynamic cells.

Any work around here?

2

I don't believe there is functionality for this built in. It appears that a feature request may have been logged for this last year (Dynamic Table - Readability) but I don't think anything has been rolled out to facilitate this.

1 Like
3

Hey @Jordan_Castro_Sauder!

Are you saying you want the end-user to be able to hover over a column value in a table row? Or you want your dynamic column header to have a tooltip?

If you are looking for a work around so you can have tooltips on column values -- you could always set your table inspector, set the column 'type' for your dynamic column to HTML, then pass your value similar to the following example with a 'title' attribute that shows the value of that hovered column, which would work like a tooltip:

`<div title="${item}">${item}</div>`

Is that along the lines of what you're looking for?

4

Hi @Jordan_Castro_Sauder,

Yes that is not a current function yet for dynamic columns, only non-dynamic columns have cell tooltips for on hover display of large amounts of data/text contained in the cells.

I just added your +1 to the ticket and will keep this posted updated with any news I hear :+1:

My suggestion for a short term work around would be to expand the width of the column to show as much of the info as possible.

Also you could toggle on 'collapsable rows' on the table and then you could add in a text box or another component that you could thread that data into so that is has more room to display for the user to see. This would effectively change it from a 'hover to show' to 'click row to expand and show' for the end users.

5

Hi Jack,

Thank you for your help, this work around will work for now.

6

Hey @AJVancattenburch

Would this also work with JSON column values?

This is a very smart workaround though that might just work.

7

I hope it works for your use case! :pray: If I'm understanding what you're saying correctly, it will technically “work” in that you’ll get a tooltip—but it’ll just say [object Object].

What you would likely need to do is convert that JSON into a text representation before passing it to the title attribute (or to the cell). For example, in your HTML‐typed column use something like:

<div title="{{ JSON.stringify(item, null, 2) }}">
  Hover to view JSON
</div>

— or, if you want to show a summary in the cell and full JSON in the tooltip: —

<div title="{{ JSON.stringify(item, null, 2) }}">
  {{ item.someKey }}
</div>

That way you could get a readable JSON dump in the tooltip instead of simply [object Object] if that's what you're current roadblock is?