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

[Paul_Danyliuk]

Here’s a pretty neat way to render tooltips. Unlike this solution it doesn’t require extra rows, and unlike @Filmos’ hyperlink 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().

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:

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.

[Connor_McCormick]

Doesn’t look like the doc is public?

[Paul_Danyliuk]

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.

[Federico_Stefanato]

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

[Andr]

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

[Jean_Pierre_Traets]

Dear @Andr,

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

Congratulations, nice job something you can be proud on

[Paul_Danyliuk]

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

[Andr]

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

@Jean_Pierre_Traets

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

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

[Andr]

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.

[Carl_Haugen]

I’m trying to decode this and use it for a simple mouseover in my doc, but can’t make it work. The formula with the JSON example here has so much elements that I just can’t wrap my head around it. The other ways are not ideal either. Perhaps someone could help me in the right direction.

I’m trying to add simple icons or a text in my docs, to provide a easy way to give some help text, without it filling my entire doc. Instead of filling the document with collapsible lines with text.

The perfect way would be to add a function like a mouseover popup with text from a question mark emoji. Another alternative is a popup from a simple text, like the hyperlink examples mentioned above. The perfect solution would be if you could add a picture or a moving gif in the popup window. Like the emoji in this example, just with a quick video instead.

Example
Icon in doc for mousehoover:
Popup bubble:

To complete the xxxxxx do the following.
1. Click the....
2. Select the
![giphy|480x270](upload://zETMDD5g8Ew0XoVYtRcIiwtP8fO.gif)
*not sure if you see this gif, but I hope so*

Any suggestions of easy popup without the need for a table?

[Paul_Danyliuk]

@Carl_Haugen It’s doable but very tricky, and you’ll still need a table so that you can somewhat easily edit your help content.

I would prefer this approach though: adding a “Help” button in a page that would bring up a modal with help topics. See here at the timestamp:

EasyEvents doc — final push and demo

[Carl_Haugen]

@Paul_Danyliuk

I would prefer this approach though: adding a “Help” button in a page that would bring up a modal with help topics. See here at the timestamp:

That’s a very clever way to go about it! Thanks for the idea. It’s certainly super helpful in the scenarios where you have a longer help text or guide. I’ll try to implement it for that purpose for sure.
It’s perhaps a bit to much of a hazel in the cases where you just need a simple line of text to explain a UI element or similar. But I could use the Hyperlink option there I suppose.

[Daniel_Stieber]

I’ve just implemented some tooltips and absolutely love it. One thing I noticed though is the line-break when working wirth formatted text.

The green dot uses a _color formatting, while the black dot has no formatting.

I’ve seen you have the same issue in your example “Info popup” @Paul_Danyliuk

This might easily destroy a nice layout. Any chance you found a way to get rid of that?

[Daniel_Stieber]

I’ve also tried with a clipped rectangle instead of formatted text, but then I get the dots next to it, no matter how wide or small the column is. Also not what I’m looking for

[Paul_Danyliuk]

Try to .Concatenate("") it. BTW do the same for your ‘Dashboard’ button to put in on the baseline along with other buttons.

Also check out the new Object() formula to create these:

How to create a 'dictionary' object? ie. list of name/value pairs

As a matter of fact, there is an Object() formula now It’s hidden because it’s added in preparation for a bigger update, but it’s there [image] However, there seems no “legal” way to extract a name by value yet. There’s only this _Deref_Object(), another hidden formula, but it cannot look into nested object (the parameter path is not really a path but only a top-level key, and you cannot chain multiple _Deref_Object()s): [image] [image]

[Daniel_Stieber]

I think concatenate didn’t work for me, definitely played around with it (almost like the new totext() )
I will try it with object() now.

Because you mention the Dashboard button. I had some weird behaviour there. When adding a concatenate, it cut of something from top and bottom. When I tried several things to find out why, I realized that when I do the same formula again, the next time it does not happen!

In the screenshot Test A and Test B here have the exact same button() formula, and with _merger()+"" they also have the same JSON. I can duplicate A and it will look suddenly like B. I can move A and B around, they will stay A (wrong) and B (right)

So if you ever encounter this. Just duplicate

[Daniel_Stieber]

With Object, I can create the same, but the extra spacing and the dots are still there. With Concatenate() the tooltip is no longer available. i will try around more, maybe I find a way…

[Johg_Ananda]

@Daniel_Stieber this can be fixed by selecting Wrap Text from [Test A] column menu

[Daniel_Stieber]

Oooh, that worked indeed! Thanks @Johg_Ananda

[Paul_Danyliuk]

An update everyone — the trick still holds strong but there’s no need for tweaking on the JSON level anymore.

Here’s the new guide

How to create Tool-Tip Pop-Ups (ie show additional info upon mouse hover)

Hi everyone, @Paul_Danyliuk recently provided an interesting solution to the topic of Tool-Tip Pop-Ups, see the related Twitter post here: I had previously reviewed @Paul_Danyliuk’s related Community post (to be found here: Mega trick: Formatted tooltips for your table items (with JSON)) and found it inspiring. Based on this approach outlined by Paul, I have tried to replicate his process. As others might find this useful as well, I have compiled it into a step-by-step tutorial. Specifical…