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.


8 Answers 8


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.

  • 1
    Best answer, to simply hide the elements with css isn't really an element. Thanks for the info.
    – andy jones
    Apr 6, 2017 at 13:01
  • 1
    Nice solution. Hiding CSS was, as I said, the last resort as I could not find it how to do.
    – Memes
    Apr 19, 2017 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

  • 2
    This should be the accepted answer! Why override files when it's just a configuration!!?
    – jrswgtr
    Oct 6, 2020 at 12:38
  • this option is not availabe in magento 2.2 Mar 6, 2021 at 6:34
  • 1
    2021 best answer
    – 00-BBB
    May 19, 2021 at 13:06
  • But this has no effect on layered navigation. I still see tooltips on 2.4.4.
    – fmineo
    Jul 4, 2022 at 15:48

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;

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.


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.


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


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.

  • 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, 2016 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, 2016 at 3:35
  • I would appreciate to understand the downvotes...
    – Memes
    Apr 19, 2017 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, 2017 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’
  • 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. Mar 10, 2017 at 22:53
  • downvote as this goes against the basic rule of developing in Magento : "Never edit core files"
    – Memes
    Apr 19, 2017 at 6:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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