Does anyone know how to show the variant name by hovering your mouse over it? (see example below) I have two stores with Palo Alto theme and one does it and the other does not.
Please let me know if anyone has a fix for this!
Topic summary
Variant name tooltips in the Palo Alto Shopify theme appear on hover for collection/main pages but not on product pages for one store; another store shows them correctly. The theme preview does not exhibit the issue, suggesting a configuration or CSS-specific problem.
Root cause identified: CSS controlling tooltip visibility on product pages keeps opacity hidden. A fix proposed is to add a rule in theme.css: selector “.tooltip-default.is-visible” with opacity set to 1 using !important, which restored the hover tooltip in tests (screenshots provided).
Alternative fix: Add CSS targeting “aos-initialized .tooltip-default.is-animating” with opacity set to 1 !important on the product page to force visibility during animation.
Actions suggested:
- Edit Online store > Themes > Edit code > theme.css and append the visibility rule.
- Or include the alternative CSS on the product page.
Notes: Images/screenshots are used to demonstrate the broken CSS and the successful result. No final confirmation from the requester; solutions are provided and the thread remains open.
Hello,
I am San from MS Web Designer.
I have noticed that the issue is not appearing in the theme preview. Please review your theme customization settings, and if the option is still not available, contact with theme developer to address and resolve this issue. And please share your store URL as well so we can check your website frontend.
Do let me know in case of any concerns.
Regards,
San
Here is the website for review: https://jatiebeauty.com/
I also just realized it shows when you hover over the variants from the main page, just not on the product page. So we need it to show on the product page as well
Hi @abrueckner
Upon checking the issue, we were able to find the CSS that’s causing this
You can follow these steps to resolve the issue:
- Navigate to Online store => Themes => Edit code
-
Search for the file “theme.css”
-
Add this code at the end of the file and save
.tooltip-default.is-visible {
opacity: 1 !important;
}
This is the result:
Hello,
You can include this CSS code on your product page to display the variant names when hovering over the colour options.
aos-initialized .tooltip-default.is-animating {
opacity: 1 !important;
}
Do let me know in case of any concerns.
Regards,
San