Squarespace Tooltips Plugin - Installation Guide

This is an installation guide for the Squarespace Tooltips Plugin. Any modifications that can be made to the plugin are marked as code comments.

Step 1

Copy and paste the following code into the HEADER section of the CODE INJECTION area.

Home > Website > Website Tools > Code Injection

<!--Google jQuery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Step 2

Copy and paste the following code into the FOOTER section of the CODE INJECTION area.

Home > Website > Website Tools > Code Injection

<script>
    $(document).ready(function () {
        let yourKeywords = {
            /*
            Add your keywords and associated descriptions below.
            Ensure keywords and descriptions are kept within the "quote marks".
            */
            "YourKeyword1": "A description for YourKeyword1.",
            "YourKeyword2": "A description for YourKeyword2.",
            "YourKeyword3": "A description for YourKeyword3.",

            /*
            You may add more keywords and descriptions here. Copy the same format as above.
            */
            
        };
        $('strong').each(function () {
            let keyword = $(this).text().trim();
            if (yourKeywords.hasOwnProperty(keyword)) {
                let tooltipText = yourKeywords[keyword];
                $(this).attr('data-tooltip', tooltipText);
                $(this).addClass('tooltip-trigger');
            }
        });
        $('.tooltip-trigger').hover(function () {
            let tooltipText = $(this).attr('data-tooltip');
            if (tooltipText) {
                $(this).append('<span class="tooltip">' + tooltipText + '</span>');
                $('.tooltip').fadeIn();
            }
        }, function () {
            $('.tooltip').fadeOut(function () {
                $(this).remove();
            });
        });
    });
</script>

Step 3

Copy and paste the following code into the CUSTOM CSS settings.

Home > Website > Website Tools > Custom CSS

/*
Change the BACKGROUND-COLOR VALUE if you want to change the color of the background.
Change the COLOR VALUE if you want to change the color of the font.
*/
.tooltip {

    background-color: black;
    color: white;
    
    display: none;
    width: 200px;
    position: absolute;
    left: 0;
    top: 1.4rem;
    padding: 10px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    font-size: 12px;
    z-index: 999;
}

.tooltip-trigger {
    position: relative;
    cursor: help;
}

.tooltip-trigger:hover {
    text-decoration: underline;
}

Step 4

In your actual website text, ensure that the tooltip keyword is bold. This is how the code differentiates between designated keywords and ordinary website text.

Video Guide