When i hove over magento color swatches, it shows a bigger tooltip. On Mobile this is truly not useful. I want to disable the tooltip.

Where can i disable the tooltip? I looked for options but did not found.



Make your theme extend Magento_Swatches. Copy swatch-renderer.js to your Magento_Swatches/web/js folder.
Edit js file, comment out or delete the $.widget('mage.SwatchRendererTooltip' ... part.
Then find

// Connect Tooltip
container.find('[option-type="1"], [option-type="2"], [option-type="0"], [option-type="3"]')

and delete it (or comment out) and then flush the cache.

| improve this answer | |
  • Best answer, to simply hide the elements with css isn't really an element. Thanks for the info. – andy jones Apr 6 '17 at 13:01
  • Nice solution. Hiding CSS was, as I said, the last resort as I could not find it how to do. – Memes Apr 19 '17 at 6:42

This was hell of a pain from trying to find the CSS, creating a mixin for swatch-renderer.js etc.

Anyway, by looking at the code I found show_swatch_tooltip in system.xml and config.xml in magento-swatches module which is set to 1 as default.

This can be switched off in the admin panel...

Stores ->Configuration ->Catalog ->Catalog ->Storefront ->Show Swatch Tooltip

I am on 2.3.4 so I don't know if Magento had this option in previous versions.

You can swicth it off here

| improve this answer | |

I wanted to disable the tooltip on just the product listing pages, so the JS solution wouldn't work as it removes them site-wide. For this, I relied on CSS:

body.catalog-category-view .swatch-option-tooltip {
  display:none !important;
  visibility:hidden !important;
| improve this answer | |

Just do Below some css change and hide tooltip in magento 2.

.swatch-attribute-label { z-index: 99999;}
.swatch-option-tooltip {
    max-width: 0px !important;
    max-height: 0px !important;
    min-height: 0px !important;
    min-width: 0px !important; border:none !important;
    background:transparent !important; 

It's works for me in magento 2.

| improve this answer | |

This has become a config setting since. You can set catalog/frontend/show_swatch_tooltip in core_config_data to 0 and it will disable the tooltip.

| improve this answer | |

In the new updates to Magento 2 (or since 2.3.4 I believe) there is now a System Configuration that handles this: Admin -> Stores -> Settings : Configuration -> Catalog : Catalog -> Storefront : Show Swatch Tooltip enter image description here

| improve this answer | |
New contributor
vladTheTech is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

I had same problems (both wanted to hide and not finding out how-to do), So I went the CSS route.

I added a CSS file to my theme with :

.swatch-option-tooltip {
    max-width: 0px !important;
    max-height: 0px !important;
    min-height: 0px !important;
    min-width: 0px !important; 

That did the trick, not elegant but working.

| improve this answer | |
  • Hi, i did the same, but added display:none to the same class. Indeed not elegant but works :). an option in admin would be nice. to enable or disable the image ect...thanks! – Fancyman Sep 20 '16 at 14:49
  • yes, your solution is a bit better. I went for the one I have because I saw the Javascript add a display:block; to the element itself, so I tried to go around, but I ended up needing to use the !important tag anyway so yours would then be better. Totally agree that an option in admin would be nice, though the CSS method has its advantages, it allows to target some screens and not others with media queries. – Memes Sep 21 '16 at 3:35
  • I would appreciate to understand the downvotes... – Memes Apr 19 '17 at 6:39
  • @Memes, we came here to understand how we can disable the tooltip, not how to hide it.. Hiding it with CSS is the easy part. – Erfan Jul 4 '17 at 3:56
  1. Edit file: {Your Magento Root}/vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js
  2. Search for: $.widget('mage.SwatchRendererTooltip'
  3. Change ‘swatch-option-tooltip’ -> ‘swatch-option-tooltip-null’
| improve this answer | |
  • 1
    That might work as a quick hack, but it's not a real solution. Files in vendor will be replaced with the next update. – Fabian Schmengler Mar 10 '17 at 22:53
  • downvote as this goes against the basic rule of developing in Magento : "Never edit core files" – Memes Apr 19 '17 at 6:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.