Jump to content

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

Recommended Posts

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: 

alt text

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.


Link to comment
  • Replies 5
  • Views 2.3k
  • Created
  • Last Reply

Digging in on the support.squarespace.com source code I found this .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:


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!

Link to comment

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. 

Link to comment

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


 1634774572_ezgif.com-gif-maker(12).gif.3836570d51f5ebc97283d974ac23db3b.gifHi, I'm sssupers.

Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.