How can i disable Color Swatches Tooltip in Magento 2?
-
14-04-2021 - |
문제
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!
해결책
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.
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.
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.
- Edit file: {Your Magento Root}
/vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js
- Search for:
$.widget('mage.SwatchRendererTooltip'
- Change
‘swatch-option-tooltip’
->‘swatch-option-tooltip-null’