How to Customize or Disable Tooltips in Variation Swatches for WooCommerce

The Challenge with Variation Swatches Tooltips

Many users of the 'Variation Swatches for WooCommerce' plugin find the tooltip feature incredibly useful for displaying additional attribute information. However, a common theme across support threads is the need to modify, customize, or completely disable these tooltips to better fit a site's design or functionality requirements. Issues range from tooltips not displaying correctly on mobile devices to wanting to remove the default browser title tooltip that appears alongside the plugin's custom tooltip.

Why Tooltip Customization is Needed

The plugin's tooltips are a core feature designed to enhance the user experience by providing more information about product variations. However, conflicts can arise with specific themes, other plugins, or on different device types. Furthermore, design preferences vary greatly—some store owners may find the default tooltip style doesn't match their theme, while others might need to display HTML content or adjust the tooltip's positioning and z-index to prevent it from being hidden behind other elements.

Common Solutions for Tooltip Customization

1. Disabling the Plugin's Tooltip via Settings

The most straightforward method to remove the plugin's custom tooltip is through the built-in settings. This is often the best first step if you want a clean removal without code.

1. Navigate to your WordPress Dashboard.
2. Go to WooCommerce → Variation Swatches.
3. Click on the Simple tab (or the relevant tab for your attribute type).
4. Locate the setting labeled "Enable/Disable plugin default tooltip on each product attribute".
5. Uncheck this option to disable the tooltips.
6. Save your changes.

2. Using Custom CSS for Visual Tweaks

If you wish to keep tooltips enabled but need to adjust their appearance, Custom CSS is the recommended approach. You can add the following code snippets to your theme's style.css file or through a custom CSS plugin.

Change Tooltip Font Size:

.wvs-has-image-tooltip:before, 
[data-wvstooltip]:before {
    font-size: 14px; /* Adjust the value as needed */
}

Set a Static Width for Image Tooltips:

.wvs-has-image-tooltip:before, 
[data-wvstooltip]:before {
    min-width: auto;
    width: 66px; /* Adjust the value as needed */
}

Increase Z-index to Prevent Hidden Tooltips:

.wvs-has-image-tooltip:before, 
[data-wvstooltip]:before {
    z-index: 999; /* A high value to bring it to the front */
}

3. Removing the Default Browser Title Tooltip

A frequent point of confusion is the native browser tooltip that appears on hover, which is separate from the plugin's feature. Since this is a browser behavior, it must be disabled with JavaScript. The 'Variation Swatches for WooCommerce' team has suggested using a script to remove the title attribute on hover.

Important Note: Adding custom JavaScript requires using a code snippets plugin or your child theme's functions.php file. Always test code on a staging site first.

The team has previously shared a JavaScript solution on GitHub Gist. You can find an example and implementation guide here.

4. Addressing Mobile Display Issues

Tooltips are designed to show on hover, which is not a native interaction on touch devices like phones and tablets. This is a technical limitation of how mobile browsers handle touch events versus desktop hover states. The plugin's official documentation indicates that tooltips are primarily a desktop feature. While some users have reported success after plugin updates, consistent mobile tooltip display often requires custom development beyond the plugin's standard capabilities.

When These Solutions Might Not Apply

It's important to verify that the tooltip you are trying to modify is actually generated by the 'Variation Swatches for WooCommerce' plugin. As seen in one thread, a user was trying to remove a price from a lightbox that was actually generated by a separate "Product Addon" plugin. Always use your browser's inspect tool to identify the exact CSS classes of the element you want to change to ensure you are targeting the correct plugin's output.

Final Thoughts

Customizing the tooltips in 'Variation Swatches for WooCommerce' is typically achieved through a combination of settings changes, CSS for styling, and occasionally JavaScript for removing browser-default behaviors. For more advanced functionality, like adding HTML to tooltips or showing tooltips for disabled variations, the plugin does not currently offer built-in options. These have been noted by the plugin's team as potential areas for future development.