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

On the Canvas - Object Formula

In Modal View - Object Formula

Combine Several Rows into a single Pop-Up

Using Canvas Cells

Databases

Solved Qs

Explore

In Modal View - Object Formula

Now that we’ve seen how to create a canvas formula for a pop-up, let’s do the same within a modal view.

The easiest way to achieve this would be to add a new column, enter the object formula, and - boom - we’re good. However, that would display the keyword as a separate field, and that’s just disruptive to user’s reading flow.

see screenshot for resulting problem:

⁠

So, let’s fine a way to make a keyword hoverable WITHIN the text.

see screenshot for our desired end result:

⁠

Here’s how to set up the table accordingly:

Create a table “Sample Texts” that contains all information that shall be displayed in row modal

To this table “Sample Texts”, add a column titled “Tool Tip”, which shall be a lookup to the table “Pop-Up Texts”. Select the applicable keyword upon which you want the Pop-Up to appear.

In Table “Sample Texts”, insert a new column with the following formula.

This newly generated object will show the tool-tip pop-up text upon hover.

⁠

Break up the text at the keyword (using split(), and then stitch the three components back together using ListCombine(TextBeforeKeyword,KeywordObject,TextAfterKeyword). I’ve broken down the steps into three different columns for demo purposes, although they could of course be wrapped into one.

This works, but poses a problem for readability - due to the fact that ListCombines creates (shocker!) a List, the three components are now separated by a comma. Not to pretty on the eyes, is it:

⁠

The solution is to use Join() and to set a simple space as the dividing character. (Shout-Out to Community Champion Max Xyzor for this tip!)

This results in the following:

⁠

Now, all that’s left to do is to edit the Modal Layout to solely show the newly created column (in the sample, this column is creatively called “Join”.

Try it

⁠

Yay, that’s great, isn’t it. But wait... there’s more! What if you’d like the pop-up to show data from multiple rows, not just one row?

Yep - there’s an app a way for that.

Read on here:

Combine Several Rows into a single Pop-Up⁠

⁠

See the resulting table structure below:

Blog Post Topic

Long Text

Related Keyword

Create Object on Keyword

Text before Keyword

Text after Keyword

List Combine

Join

Amelia Earhart

Amelia Mary Earhart was an American aviation pioneer and writer. Earhart was the first female aviator to fly solo across the Atlantic Ocean. In 1932, Earhart made a nonstop solo transatlantic flight, becoming the first woman to achieve such a feat. Earhart's legacy is often compared to the early aeronautical career of pioneer aviator Charles Lindbergh.

Atlantic Ocean

Amelia Mary Earhart was an American aviation pioneer and writer. Earhart was the first female aviator to fly solo across the

. In 1932, Earhart made a nonstop solo transatlantic flight, becoming the first woman to achieve such a feat. Earhart's legacy is often compared to the early aeronautical career of pioneer aviator Charles Lindbergh.

Amelia Mary Earhart was an American aviation pioneer and writer. Earhart was the first female aviator to fly solo across the

Atlantic Ocean

Amelia Mary Earhart was an American aviation pioneer and writer. Earhart was the first female aviator to fly solo across the

Atlantic Ocean

⁠

Charles Lindbergh

Charles Augustus Lindbergh was an American aviator, military officer, author, inventor, and activist. At the age of 25, he achieved instant world fame by making the first nonstop flight from New York City to Paris on May 20–21, 1927.

New York City

Charles Augustus Lindbergh was an American aviator, military officer, author, inventor, and activist. At the age of 25, he achieved instant world fame by making the first nonstop flight from

to Paris on May 20–21, 1927.

Charles Augustus Lindbergh was an American aviator, military officer, author, inventor, and activist. At the age of 25, he achieved instant world fame by making the first nonstop flight from

New York City

to Paris on May 20–21, 1927.

Charles Augustus Lindbergh was an American aviator, military officer, author, inventor, and activist. At the age of 25, he achieved instant world fame by making the first nonstop flight from

New York City

⁠

to Paris on May 20–21, 1927.

There are no rows in this table

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.