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

[Nina_Ledid]

Hi everyone,

@Paul_Danyliuk recently provided an interesting solution to the topic of Tool-Tip Pop-Ups, see the related Twitter post here:

Paul from the Coda Community

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

[Max_OBrien]

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.

[Paul_Danyliuk]

Ha, thanks for wrapping this trick into a full guide!

[Nina_Ledid]

@Max_OBrien

the same technique can be used to create DROP-DOWN menus !

What a wonderful addition, thanks for building on it, @Max_OBrien!

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:

Step-by-Step Tutorial for Tool-Tip Pop-Ups

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

[Bill_French]

@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.

[Nina_Ledid]

@Bill_French

I decided to apply this concept using a canvas - seems to provide flexibility when designing tool-tips

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 @Max_OBrien 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 @Max_OBrien). 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

[Paul_Danyliuk]

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.

[Bill_French]

@Paul_Danyliuk

Buttons in the popups should be clickable

@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.

[Bill_French]

@Paul_Danyliuk

inclusion of tiny icons. An icon is just asking to be hovered for more info.

This is elegant. Love it!

[Nina_Ledid]

@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

[Paul_Danyliuk]

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.

[Susan_M_Davis]

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?

[PRV_Watch]

The tooltips work on desktop but do not function when viewing on mobile. Is there a fix for this to enable functionality on mobile?

[Logan_Krantz]

Hi Team, this is great and exactly what I need.
But is there any way to make the hitbox of these Object Formulas easier to hover over in table mode?
The table I need to use is 1 row high. And the aim required on the mouse is insane.
(See image below)
Any solutions?

It would also be great to figure out how to preserve new lines in those popups

[Max_OBrien]

Pop-Ups & Tool-Tips in Superhuman Docs

“Agile Popups” Pack

This provides a mechanism for easily adding Tool-Tips and Pop-Up Menus to your Superhuman Docs.

TOOL-TIPS are small icons (or text) that respond when the mouse ‘hovers’ over them.
Then they pop-up a larger element that contains more information.
The pop-up can be a body of text, or some graphics, or any combination you need.
The icon can be an image, a text, a button, or a checkbox.
If it is a button, the use can click on it to activate its action.
If it is a checkbox or toggle-switch, it will respond to being clicked as usual.

POP-UP MENUS are small icons (or text) that respond when hovered-over by showing a menu.
The menu can contain text, graphics, as well as the BUTTONS for the menu.
When the buttons are clicked, they execute their action formula as normal.

These elements are defined as rows in a table called Popups

Each element has the following attributes (columns):

• Name: used in your formulas to select the element
• Display: the small (icon or text) to be displayed on the canvas
• Content: the expanded element that will appear on hover
• PopUp: the actual pop-up element that will be used in your document

To ‘Install’ the Agile Popups mechanism in your document

To make it as easy as possible to include this special table in your documents, I have ‘packaged’ it as a Superhuman Pack.
The steps to install this in your document are as follows..

(1) Anywhere in your document, type /Agile Popup and it will bring up the pack installer dialog.

(2) Click on the Add to doc for free button to install the pack

(3) On the right side-panel you will see the Agile Popups pack features

(4) Under Templates you will see the document POPUPS←click here template

(5) when you hover over that template, you will see a big pop-up explaining what it does

(6) just click the POPUPS←click here document to complete the installation

(7) This will insert the POPUPS Examples and the Popups table into your document

(8) You can experiment with all the different examples to see how they work

(9) And you can explore those examples in the Popups table below that

(10) You can delete the paragraphs with the examples, but leave the Popups table

(11) The easiest way to create ypur own popups is to edit the examples to match your own requirements

To create your own POPUPS; add a row (or modify a row) as follows

For this example, I create a popup for a YouTube video and call it XXX…

(1) Give each popup its own unique Name so you can reference it in your document - Ive used XXX

(2) edit the Display canvas to whatever graphical display item you want to be shown in the doc

• • its is best to make it something small but ‘obvious’, something that suggests ‘hover here to see more’
  • it can be a text, an icon, an tiny image, a ‘callout’ (for colored background) or a checkbox, or a button
  • if its a button, you edit the formula to define what it does when clicked
  • I am using an image for this example

(3) then edit the Content cell to provide the expanded information that is shown on hover

• • this is a canvas column - so it can be a significantly complex display
  • it can include text, graphics, buttons, formulas, call-outs, headings, almost anything you like
  • tables or grids will not be rendered, but a clickable element will be shown instead
  • you can even next more popups inside this, so the user can hover on them to see even more detail
  • I am using a link to a YouTube video for this example

(4) test your popup by hovering over the element displayed in the Popup column

To insert your popups into your document you create a formula as follows (using the example from above)…

(1) wherever you want the tooltip or popup to appear, create a formula by typing /f (or = in the old version of Coda)

(2) then type @XXX followed by the TAB key to tell the formula editor to select the right row in the popups table

(3) then type .Popup to select the correct column to make the popup work

(4) exit the formula editor and you will see the popup element has been inserted into your document

(5) you can now hover over it to see the popup displayed, and if its a menu; you can click on the buttons to test them

I will post a video soon to illustrate all this more clearly.

If you have any issues, questions, or suggestions; just DM me here or email me at Max@Agentix.Technology any time.

Max