Updated 1/2/2024 — For anyone who pays for SquareSpace web hosting, adding simple and flexible tooltip functionality can be done in about 10 minutes. You just need to have a premium SquareSpace subscription – meaning, you pay for the service. Here’s how it works…

1. Add some code to your Code Injection header

You’re going to add jQuery, Popper, and Tippy into your Code Injection header, along with some basic JavaScript. These are terrific libraries that can add a lot of functionality to your site. Because they’re loaded from cdn’s that take advantage of caching, I wouldn’t worry too much about the overhead.

• Go to Settings => Utilities => Website Tools => Code Injection

• Paste this code into the textarea

• Save your changes

Confirm the JavaScript has loaded, and is available on your pages

• Go to any page on your web site outside of page edit mode

• Open the JavaScript console, and type this:

• ☝🏽The above code should print true

• If it doesn’t, it’s possible that jQuery is conflicting with other JavaScript on your site – try using jQuery.noConflict()

2. Create Tooltips with text only

This is the simplest use case, and can easily be done with the standard link widget. From a page or blog post, add tooltips by creating links whose href attribute is prefixed with #tooltip_. That’s it.

• Here’s what a text-only Tooltip looks like

2.1 Create Tooltips with HTML

2.2 Create Tooltips that click through to URLs

Note: The example below only works because of the data-url attribute on the anchor tag, in combination with the JavaScript that transforms each link on your page. You’ll need to use the code widget for this, and NOT the link widget.

3. Optionally Style your Tooltips

You can apply style overrides to your tooltips by targeting the following selectors.

Look at the result

This tooltip’s styling is now overridden by the above css ☝🏽.

Named Anchor

☝🏽 Above this header, there is the following code snippet.