A user seeks to add tooltips displaying variant titles when hovering over image-based swatches on their product page using the Atelier (Horizon) theme.
Solutions Proposed:
Manual Code Edit (JakeJ): Add a title attribute to swatch labels in the theme’s variant-swatch snippet (e.g., variant-swatch.liquid).
CSS + Data Attribute (AiTrillion): Inject custom CSS into the theme’s stylesheet to create styled tooltips using ::after and ::before pseudo-elements, paired with a data-title attribute on each swatch element. Includes visual example.
Simple Title Attribute (CodingFifty): Add title="{{ value }}" directly to swatch images for default browser tooltips, with optional CSS/JS for enhanced styling.
App-Based Solution (Easify-Jennifer): Use the Easify Product Options app, which natively supports image swatches with tooltips—no coding required. Includes screenshots of app settings and tooltip output.
Status: Multiple approaches provided; no follow-up from the original poster yet.
I am looking for a way to display tooltips when hovering over my variant swatches on the product page. The swatches have images for each variant and not just colors, I would like for the variant title to be displayed as tooltips.
I am using Atelier theme, one of the new Horizon themes.
To display tooltips with variant titles on image swatches in the Atelier (Horizon) theme, add the title attribute to each swatch label in your theme’s code.
Steps:
Go to Online Store > Themes > Edit Code.
Locate the swatch snippet (e.g., variant-swatch.liquid).
In the swatch ,
Hi @danielrzg ,
Go to your Shopify admin → Online Store → Themes → Actions → Edit code
Find the main CSS file (typically theme.css, base.css, or global.css) in the Assets folder
Add this CSS at the end of the file:
/* Variant swatch tooltips */
.variant-swatch {
position: relative;
display: inline-block;
}
.variant-swatch:hover::after {
content: attr(data-title);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #000;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
z-index: 10;
margin-bottom: 5px;
}
.variant-swatch:hover::before {
content: “”;
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: #000 transparent transparent transparent;
margin-bottom: 0;
z-index: 11;
}
Find the variant swatch template (likely in product-card.liquid, product-info.liquid, or similar)
Ensure each swatch has the data-title attribute with the variant title:
<div class="variant-swatch" data-title="{{ variant.title }}" style="background-image: url('{{ variant.image.src | img_url: '50x50' }}')"></div>
It will show like this (Please check the below image)
If you stuck somewhere, Feel free to DM me anytime and I will be more than happy to help you!
Hey! @danielrzg ,
To show tooltips on hover for your image-based variant swatches in the Atelier theme, you can add a title="{{ value }}" attribute to each swatch image in your theme’s code (usually in a snippet like product-variant-options.liquid). This will display the variant title as a default browser tooltip when users hover over the image. If you prefer a more styled tooltip instead of the default, you can use a bit of custom CSS and JavaScript to create a nicer floating label.
Hi @danielrzg
If you’re looking to show tooltips with the variant titles when hovering over image swatches, a great solution would be to use Easify Product Options. It supports both image swatches and tooltips, so you can easily display the variant name when customers hover over each option — no custom coding needed.
If you’d like to try an app to make things easier, this could be a really smooth option to consider! Here’s how it works:
To show tooltip for variants like my demo, simple click add/ edit value description:
I hope this answer helps solve the problem. If you need further assistance, feel free to reach out to Easify anytime! 
