How can i disable Color Swatches Tooltip in Magento 2?

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"]')
.SwatchRendererTooltip();

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


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


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