Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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: 

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.


Share this post

Link to post

5 answers to this question

Recommended Posts

  • 0

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!

Share this post

Link to post
  • 0

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. 

Edited by Bigthan

Share this post

Link to post
  • 0

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


"Yes the preview window expanding randomly is annoying isn't it?
We were just having a laugh about how long it has been like that."

Share this post

Link to post
  • 0

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>


Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...