Adding Popup Tooltips to Squarespace

Adding Popup Tooltips to Squarespace

This isn't a built-in feature of Squarespace, but you can add it using some CSS styles, and either a Code Block or a Markdown Block instead of a Text Block.

Custom CSS

Add the following CSS to Design > Custom CSS:

/* Hover effect Popup */
/* Show hover links with dotted underline */
a.hover-tip {
  border-bottom: 1px dotted black;
/* Hide underline when hovering */
a.hover-tip:hover {
/* Format the title */
a.hover-tip strong {
a.hover-tip span {
  display:none; /* hidden until hover */
  padding:14px 20px;
  box-shadow: 5px 5px 8px #CCC;
a.hover-tip:hover span{
    border:1px solid #DCA;
.hover-callout {

This code includes the formatting for the hover pop-up. It can be edited as required.

Add Hover Link in a New Block

1. Create a new page on your Squarespace site, or edit an existing one.

2. Add a Code Block or a Markdown Block. Add your paragraph text inside the block.

3. Add the following code just before the word or phrase where you'd like to add the hover feature.

<a href="#" class="hover-tip">

4. Add the following code just after the word or phrase. 

        <img class="hover-callout" src="//">
        <strong>Simple Tip Effect</strong>
        <br>Here's a simple lightbox effect that you can use to add a popup to explain a term in more detail.

5. Edit the title of the effect, by editing the section within the 'strong' tags.

6. Edit the body of the message by editing the section after the br tag. 

7. Save the Block.

8. Save the Page. 

Final Steps

Now you can test it by hovering over the underlined word or phrase. 

For simplicity, this example relies on a small image stored on my website called callout.gif. This produces the pointed callout on the left of the box. You'll need to download this file, save it on your website and then amend the path in the code above. For instructions on how to save the image on your site, see this Squarespace Support guide.


SF Digital