Mega trick: Formatted tooltips for your table items (with JSON)

Here’s a pretty neat way to render tooltips. Unlike this solution it doesn’t require extra rows, and unlike @Filmoshyperlink hack it doesn’t rely on broken hyperlinks and is much richer.

The idea:

  • prepare a JSON object (text) with all the fields that you want to display in a tooltip
  • render it with ParseJson().

image

The first value in the JSON will be treated as a display value and will appear as cell text, while everything else will appear when you hover it with your mouse in a popup:

image

There’s also an advanced trick: you can preserve text formatting in this object that you’re creating. To do that, replace the value in "key" : "simple text value" with a Coda’s internal JSON representation of a formatted column. To get this, follow another trick by @Filmos:

By inserting it as a value in your JSON, you’ll make Coda render it recreating the formatting:

Here’s the doc for you to play around:

Don’t forget to subscribe to codatricks.com — I’ll lower my standards once again this weekend and will maybe finally publish something there.

13 Likes

Doesn’t look like the doc is public?

Oops, seems like something changed on that front. Previously embedding automatically added “can view by link”. Fixed.

UPD: also added same formatting hack to popup content, and made column names more verbose.

1 Like

@Paul_Danyliuk, it’s always amusing to read (and learn from) your tips.
Chapeau! :tophat:

2 Likes

Thanks for sharing your knowledge @Paul_Danyliuk , I’ve implemented your solution for a grid view for images, to show relevant information of the image when you mouse over it. https://coda.io/@adn/imgtools

Now I’m trying something different and I’m a bit stuck to polish it out.
Goal: implement a tooltip that works as a lookup to another table.
This is useful when you have to lookup to a lots of items from a table and don’t want to waste space by wrapping the cell to show all the content.
My current issue: I want to waste less space in the tooltip, ideally it should feature a list of adjacent items, like a vanilla lookup. Now it has a column format, and it’s too much to scroll.
If I have to be stick with the column format, at least I’d like to be able to remove the gray titles of each item, this should save up 50% of the height.
Here’s the prototype: https://coda.io/d/Issues-and-tests-public_dGYEvhjpqYI

cheers

Dear @Andr,

I had the chance for a quick view on mobile, it’s impressive :hammer_and_pick: and looking forward to check on the desktop.

Congratulations, nice job :clinking_glasses: something you can be proud on :trophy:

1 Like

Don’t have the time to look very closely — but just like you’re composing a list of key:values, you can compose a simple JSON array, e.g.

{
  "Display Column":"lookup tooltip",
  "Pictures":[
    {...},
    {...},
    ...
  ]
}

Try that

1 Like

Thanks a lot for the tip @Paul_Danyliuk, It works just fine!

Hi Jean, thanks!
If you are referring to imgtools, there’s some displaying bug on mobile, that prevents the Grid View to be loaded correctly. So yes, better to check it out on desktop.

Cheers

1 Like

I just noticed that when I changed the order of the items,
the rendering column with ParseJSON(_finalJson) was not updating with the new order.

I tried to use a refresh action on all the json related columns, but the new order of items was not updating.

Only thing that triggered the update was to manually delete the formula ParseJSON(_finalJson), leaving the rendering colum blank, letting it register the blank value and then pasting again the same formula.