Skip to main content

How to create a tooltip (product page / cms page / static block)

Note: When creating a new tooltip use this code.

Tooltip with text only​

Note: copy and paste this code when you want to create a tooltip with a link and text. The span text needs to be changed.

<img src="{{skin url='images/tooltip-icon.svg'}}" alt="tooltip" class="tooltipster">
<div class="tooltip_templates">
    <span class="tooltip_content">
        <span>**tooltip text goes here**</span>
    </span>
</div>

Tooltip wth link (button) and text​

Note: copy and paste this code when you want to create a tooltip with a link and text. The span, page link and button text need to be changed.

<img src="{{skin url='images/tooltip-icon.svg'}}" alt="tooltip" class="tooltipster">
<div class="tooltip_templates">
    <span class="tooltip_content">
        <span>**tooltip text goes here**</span>
        <a href="**page link goes here**" class="button">**button text goes here**</a>
    </span>
</div>