How can i disable Color Swatches Tooltip in Magento 2?

magento.stackexchange https://magento.stackexchange.com/questions/321630

  •  14-04-2021
  •  | 
  •  

Question

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.

Thanks!

Was it helpful?

Solution

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.

OTHER TIPS

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

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;
    overflow:hidden;
    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;
    overflow:hidden;
    min-height: 0px !important;
    min-width: 0px !important; 
}

That did the trick, not elegant but working.

  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’
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top