4

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.

4
  • Do you mean disable hover swatch on product listing page, the image change?
    – Gagan
    Sep 21, 2018 at 4:44
  • Not the image change.When we hover the swatch (color) for ex., green color swatch, a box with green color will be displayed. I don't want any style when i want to hover the swatches.
    – Anand V
    Sep 21, 2018 at 4:49
  • You would like to have a look at the answer here, this might be you solution - magento.stackexchange.com/questions/135029/…
    – Gagan
    Sep 21, 2018 at 5:07
  • Found the solution by using the CSS property...
    – Anand V
    Sep 21, 2018 at 6:18

2 Answers 2

2

For me this worked: vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js copy to YourVendor/Your_Theme/Magento_Swatches/web/js/swatch-renderer.js

Change this line:

         if (!$element.length) {
                $element = $('<div class="' +
                    $widget.options.tooltipClass +
                    '"><div class="image"></div><div class="title"></div><div class="corner"></div></div>'
                );
                $('body').append($element);
            }

in my case i removed only image and keeped title:

 if (!$element.length) {
        $element = $('<div class="' +
            $widget.options.tooltipClass +
            '"><div class="title"></div><div class="corner"></div></div>'
        );
        $('body').append($element);
    }

but if you want nothing, just remove full :

<div class="image"></div><div class="title"></div><div class="corner"></div></div>

and keep only this:

'>'
0

swatches are rendered from vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js file:

copy that file and save in your theme directory i.e :

vendor-direcotry/theme/Magento_Swatches/web/js/swatch-renderer.js

search code below and just comment that out :

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

Then flush cache and deploy your static-content ( in default mode ). It will solve your issue.

2
  • Sorry still not working
    – Anand V
    Sep 21, 2018 at 6:18
  • make sure your customized js file is being loaded / mapped. check in your pub/static folder if it is created Sep 21, 2018 at 6:19

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.