Creating Tooltips/Definitions like those on Support.SquareSpace.com articles

I am wanting to use something very similar to the tooltips/definitions that show up on nearly every page of the SquareSpace Support site.

As an example: 

This is from the Getting Started page

These seem to be using the dfn html tag, and appear consistently throughout the site.

Were these manually added, or is there some css/JQuery or something else that can be done to dynamically add this type of tag to every instance of a list of words on my site?

I'd love to have a glossary of terms with definitions/links to those terms very similar to what is happening here, but adding them manually to every instance of each word does not sound like fun.

Thanks!

Digging in on the support.squarespace.com source code I found this .js:

https://theme.zdassets.com/theme_assets/593095/93d31766c755544478ed95705fc084543b03c996.js

If you search for "dfn" you can see the section that contains what I think I need here. It looks like it imports this glossary earlier which makes it all work:

https://theme.zdassets.com/theme_assets/593095/767c5914836cc683996ad2f2aaa75320dec2c8ed.json

And at that point I am just feeling like I am in way over my head for the functionality I want. My ability was pretty much exhausted just digging this up. Anyone able to help me figure out how to reproduce this sort of functionality? It's very pretty and I would love to have it!

Hi Bigthan,

there's a plugin for sale at $20 that does the trick using text in a Markdown block:
https://squarestud.io/products/info-pop-ups

Thanks, @sssupers !

I'm not seeing much detail on that site for this, and have some questions. And I'm not sure who/how to ask through there either. This looks like it is just part of what I want here. 

If you happen to know:

Are these "info pop-ups" being added dynamically based on a glossary I define somewhere? What I mean is I define a pop-up for a word, let's say "Attack", then anywhere on my site where the word "attack" shows up, it automatically gets the same pop-up with the info defined in my glossary. 

Would I be able to modify those to make them links as well as tool tips on hover? 

If those are things, I'd be happy to pay the $20 for it. 

Hi, you'll use a script, a style sheet and a Markdown block in which you may edit the content to display in any way your html skills take you.
The pattern will go alike in the screenshot attached, for further info you'll need to get in contact with the dev teams' support (which isn't known to be overinforming btw.)

You can also use a Code Block with the `DFN` element and let the browser render the tool tip natively.

<p><dfn title="HyperText Markup Language">HTML</dfn> is the standard markup language for creating web pages.</p>