I replied to an earlier post about pop-ups and noticed that I never posted about the pack I built 2 years ago to do this..
“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
