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!
Add a comment
|
8 Answers
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.
-
1Best answer, to simply hide the elements with css isn't really an element. Thanks for the info. Apr 6, 2017 at 13:01
-
1Nice solution. Hiding CSS was, as I said, the last resort as I could not find it how to do.– MemesApr 19, 2017 at 6:42
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.
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
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.
-
Hi, i did the same, but added display:none to the same class. Indeed not elegant but works :). an option in admin would be nice. to enable or disable the image ect...thanks!– FancymanSep 20, 2016 at 14:49
-
yes, your solution is a bit better. I went for the one I have because I saw the Javascript add a
display:block;to the element itself, so I tried to go around, but I ended up needing to use the!importanttag anyway so yours would then be better. Totally agree that an option in admin would be nice, though the CSS method has its advantages, it allows to target some screens and not others with media queries.– MemesSep 21, 2016 at 3:35 -
-
@Memes, we came here to understand how we can disable the tooltip, not how to hide it.. Hiding it with CSS is the easy part.– ErfanJul 4, 2017 at 3:56
- 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’
-
1That might work as a quick hack, but it's not a real solution. Files in
vendorwill be replaced with the next update. Mar 10, 2017 at 22:53 -
downvote as this goes against the basic rule of developing in Magento : "Never edit core files"– MemesApr 19, 2017 at 6:41