To add a tooltip in Shopify CMS, you can use simple HTML and CSS, or leverage Shopify’s Liquid code and JavaScript for a more dynamic implementation. This guide will walk you through several methods, starting from a straightforward approach to more advanced techniques.

Basic HTML and CSS Tooltip

Here’s a straightforward way to implement a tooltip using only HTML and CSS:

<style>
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: white;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 100%;
        left: 50%;
        margin-left: -60px;
    }
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
</style>

<div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span>
</div>

This creates a tooltip that appears when you hover over the element.

Using Shopify Liquid and JavaScript

For a more interactive tooltip, you can integrate Shopify’s Liquid templating with JavaScript:

<style>
    .tooltip-js {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }

    .tooltip-js .tooltiptext {
        visibility: hidden;
        width: 120px; 
        background-color: black;
        color: white; 
        text-align: center; 
        border-radius: 6px; 
        padding: 5px 0; 
        /* Positioning */
        position: absolute;
        z-index: 1;
        bottom: 125%; 
        left: 50%; 
        margin-left: -60px; 
    }
    .tooltip-js:hover .tooltiptext {
        visibility: visible;
}
</style>

<div class="tooltip-js">Hover over me
    <span class="tooltiptext">{{ 'products.tooltip_text' | t }}</span>
</div>
<script>
document.querySelector('.tooltip-js').addEventListener('mouseover', function() {
    this.querySelector('.tooltiptext').style.visibility = 'visible';
});

document.querySelector('.tooltip-js').addEventListener('mouseout', function() {
    this.querySelector('.tooltiptext').style.visibility = 'hidden';
});
</script>

This method uses a simple event listener to show and hide the tooltip text, leveraging Shopify’s Liquid to pull text dynamically, which is ideal for displaying product-specific tooltips.

Advanced Dynamic Tooltips

If you require a tooltip that adapts its content dynamically based on data attributes or needs to function across multiple elements, you might consider using a small JavaScript library or writing more complex JavaScript code.

• Consider using libraries like Tippy.js for wide customization options and simplicity.
• Ensure your tooltips are accessible by adding appropriate ARIA attributes.

Adding tooltips in Shopify CMS is straightforward but can also be enhanced with advanced techniques for better user engagement and providing informative content directly at the point of interest.