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.
Specifically, this doc shows Paul method of creating a popup upon hover with rich content, which I have sorted into
a) Using Tool-Tips on a Canvas page
and
b) Using Tool-Tips within a row modal
Find the guide here: Step-by-Step Tutorial for Tool-Tip Pop-Ups
Thanks, Paul, for the insights!
All the best from Austria,
Nina
17 Likes
well done everyone.
this is a most interesting discussion.
i also have a similar trick for generating a “drop-down” menu, but the Object()/_Merge() trick does not work in this case, the buttons are visible, but they dont run when clicked.
so instead i use a lookup canvas control to display a table-row when you hover on it.
and that row has a set of buttons made with Button() functions joined by new-lines.
7 Likes
Ha, thanks for wrapping this trick into a full guide! 
1 Like
What a wonderful addition, thanks for building on it, @Agile_Dynamics!
I’ve further iterated on it, to allow a drop-down menu based on the related keyword. See gif for more details
or check-out the newly included subpage in the guide:
All: The guide is a published doc, which - at the top of the page - contains a button allowing you to copy the doc. Feel free to do so in order to be able to explore the formulas used in detail.
Thanks,
Nina
5 Likes
@Nina_Ledid This is a great discussion. I tend to try to simplify stuff and I decided to apply this concept using a canvas - seems to provide flexibility when designing tool-tips. You can play with this example doc (Rich Hover).
Applying the tool tip in a formula looks like this in my approach, but I’m sure even this could be simplified. Please tell me how to make this more elegant. 
I also simplified the terms dictionary by merging everything into a canvas.
4 Likes
Such a great implementation, thanks for sharing in your demo doc, @Bill_French
It will surprise absolutely no one to hear that while I was getting lost stringing together ever more object-formulas and completely losing sight of the big picture, community champions @Agile_Dynamics and @Bill_French swooped in, establishing “wait a minute, isn’t the point of all this to create a simpler way to generate pop-ups?” Which, of course, is exactly the point. And then they both pointed me in the right direction. Thanks so much to both of you and to @joost_mineur as well, another Community Champion who is always so generous with his expertise!
I’ve updated the tutorial accordingly.
I’ve also included a page containing examples for the two questions I can’t yet figure out:
1.) When using a named formula, it appears in a non-formatted way, thus not making it clearly visible to a reader that this word contains hoverable elements.
2.) (this Q was identified by @Agile_Dynamics). When the Canvas Cell contains Buttons, this are not clickable from within the pop-up.
But: When you try to click on it, you’re taken into the named formula, instead of executing the button’s action. I find this particularly confusing using buttons within the object-method of generating a pop-up DOES work (see example in the tutorial guide).
Maybe anyone within the community has any ideas for either?
Thanks,
Nina
5 Likes
Can you please maybe record a loom of what you mean?
I’m not using named formulas but if I want to prevent a formula to pop up, I just use locking.
Buttons in the popups should be clickable, it’s just that the popup doesn’t redraw itself. So if a button e.g. becomes inactive or changes label in its original place it won’t do so in the popup.
As for your pondering how to make popups discoverable, I do that either through formatting or rather through inclusion of tiny icons. An 
icon is just asking to be hovered for more info.
1 Like
@Nina_Ledid, I think @Paul_Danyliuk is right. I added a button to my Rich Hover document example and while the button doesn’t work for the maker, it certainly works for the document users.
This is elegant. Love it!
@Paul_Danyliuk and @Bill_French knocked my remaining open questions right out of the park 
Thanks so much for your insights!
Ad Q1) Buttons in pop-ups via Canvas Cells are indeed clickable for users. Merely for doc makers do they bring up the formula editor. My bad, I should of course have tested this before assuming it was a bug 
Ad Q2) I LOVE @Paul_Danyliuk’s inclusion of tiny logos. Makes the hoverable content easily spottable and can be done without additional effort on custom formatting.
I’ve included your solutions to the questions in the tutorial guide accordingly.
Thanks,
Nina
1 Like
One last thing. In a nutshell: don’t overdo popups. This is hidden content after all, not easily discoverable even with formatting or icons (and practically non-discoverable on mobile) so consider it carefully whether you want to put any info in a popup or choose another way:
-
a button that opens a modal or does other contextual things:
-
no popup but a link. Could open up a modal or a new window — good UX is to distinguish the two. In regular web dev these are done with dotted and solid underline respectively but we don’t have that in Coda, so what I do is distinguish by icons:
-
finally, if you want people to see the popups, maybe don’t hide the content at all. In my landing page, initially I had expandable list items:
It didn’t feel noticeable so I replaced it with these callout boxes. They are still scannable if a person wants to skim the page quickly, yet they present themselves much better:
If the reason why you’re using a popup is too much text that you don’t want to spill all over your doc but actually want people to read because it’s important — put your time into better copy-writing Write, shorten, rinse, repeat until it is concise enough that you don’t have to hide it.
2 Likes
This is really cool. Thank you for sharing it. I have a question though.
In playing with the doc, rather than using an image and a text I just put in a canvas column and edited the formula to pull up that canvas column. It seems to work fine.
Also, I edited the formula from calling .first() or having to change it to .nth(x) every time you use it. I put a WithName in it, named that PopUp and had it filter on that table for the keyword. In this manner, you can just copy that same formula and only change the keyword one time in the first filter statement of the WithName. Seems to work fine.
So I’m curious. Is there a reason you avoided using a Canvas column and just putting what you wanted in that one canvas column and instead chose to break it into 2 columns one for image and one for text?
