Swatches Hover Option

[anand_v]

How to disable the hover option for swatches?

For Ex., Color attribute has the swatches. While we hover a swatch a div displaying that colour in a respective height and width.

Suggest the solution for this please.

[Manish Mittal]

Hello @anand_v

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 part$.widget('mage.SwatchRendererTooltip' .... 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.

Cheers! 

[Ravikant soni]

1. Put below file in your theme 

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’

[anand_v]

Sorry @Manish Mittal 

I have tried it. But it is not working

[Manish Mittal · Accepted solution]

@anand_v

No worries man,

You can just hide using CSS

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

or 

body.catalog-category-view .swatch-option-tooltip {  display:none !important;  visibility:hidden !important;
}

Make sure after these changes to run the upgrade and static content deploy commands and clear cache. 

 Try which one is help you cheers

[gelanivishal · Accepted solution]

Hello @anand_v,

Please follow below steps for it

1. Put below file in your theme vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js 
2. Find swatch-option-tooltip text and remove it and it will look like the attached screenshot https://www.screencast.com/t/Zqojhm18PKQ
   
3. Run below command
   

   php bin/magento setup:static-content:deploy -f
   php bin/magento cache:flush
   php bin/magento cache:clean

4. Done.

--
If my answer is useful, please Accept as Solution & give Kudos

[anand_v]

Not working @gelanivishal. 

I have tried using CSS.

[peter_kisdaroczi]

This is causing a problem, making layered navigation not working on category pages. Not a good solution.