Display tooltips in swatches picker

[danielrzg]

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.

[JakeJ]

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:

1. Go to Online Store > Themes > Edit Code.

2. Locate the swatch snippet (e.g., variant-swatch.liquid).

3. In the swatch <label>, 

[AiTrillion · Accepted solution]

Hi @danielrzg ,

1. Go to your Shopify admin → Online Store → Themes → Actions → Edit code

2. Find the main CSS file (typically theme.css, base.css, or global.css) in the Assets folder

3. 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;
   }

4. Find the variant swatch template (likely in product-card.liquid, product-info.liquid, or similar)
5. 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!

[CodingFifty]

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.

[Easify-Jennifer]

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:

• This is the result:

• This is the app setting:

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! 🤗