fbpx
Want To Add Extra Images Per Product Variation For Free? Download Now

Swatches tooltip image issues

Jeanette Poon

I have query with image tool tip.
https://ezitag.wpengine.com/product/fully-produced-name-tag-105-x-148mm-portrait/
There is an issue with text and image alignment for the tooltip.
Here the second and third swatch tool tip image text gets hidden. I have tried to use the same image still the issue remains the same
The strange thing is it works fine for the first swatch.
This is happening only for a few products
It is working fine on the below product.
https://ezitag.wpengine.com/product/taurus-lanyard-full-colour/


swatch1.pngswatch-2.pngswatch3.png

Hakik Zaman

Hi Jeanette,

Thanks for reaching out to us. Please use the same dimension for all the tooltip images.

You are using different sizes for separation tooltip images.

I hope this will resolve your issue.

Thank You

Jeanette Poon

Hi Hakik,

It is not the dimension of the image.

I have added the same image here for all three swatches to test still the issue remains the same.

If you inspect you can see all the images are the same.

Can you please check the issue in detail and advise accordingly?

Regards

Hakik Zaman

Hi Jeanette,

The size of your tooltip text is long. So, please select an image size that fits with the text. You can choose the image size from GetWooPlugins > Variation Swatches > Styling > Tooltip Styling > Tooltip image size

I think 500×500 or, 400×400 may fit with the text. You can also add other sizes to test by adding the following snippet:

add_action( 'after_setup_theme', 'wpdocs_theme_setup' ); function wpdocs_theme_setup() {
add_image_size( 'your-desired-thumb', 400 ); // Add your sizes here by replacing 400
}

After adding the snippet, you have to regenerate the thumbnail using a plugin like: https://wordpress.org/plugins/regenerate-thumbnails/

Thank You

Jeanette Poon

Hi Hakik,

Thanks for the details.

But the text should go in another line if it is greater than the size of the image/container.

As, if I make images bigger then there will be an issue in responsiveness for smaller devices.

Is there not a way I can limit the text width to the width of the image?

this just means that there is an issue with responsiveness with the plugin.

Can you please advise?

 

 

 

Hakik Zaman

Hi Jeanette,

Is there not a way I can limit the text width to the width of the image?

If you inspect it is displayed as ‘content’ and the image is the background image.

We had to implement it to minimize the responsive issue. In our previous version, the structure was different.

The tooltip was displayed cut off when the swatch was on the edge of the small screen.

Is this your staging site: https://ezitag.wpengine.com/product/fully-produced-name-tag-105-x-148mm-portrait/?

Can I send it to our development team for the test?

Thank You

Jeanette Poon

Hi Hakik,

Thanks for the details. But, the issue with responsive ness is still there.

This is our development site. You can send it to your developer.

Ther is no issues with that.

Let me know if you need any further information.

Regards,

 

 

Hakik Zaman

Hi Jeanette,

Unfortunately, I didn’t get any update regarding your tooltip issue.

They suggested you use 500×500 for now. If they find a way to fix it on the small device they will release an update.

Thank You

Jeanette Poon

Hi Hakik,

Thanks can you advise when will the update received?

Regards

Hakik Zaman

Hi Jeanette,

Unfortunately, I am unable to give any exact date.

Your text length (label) is very long.

For the tooltip, you used a pseudo-CSS element (::before & ::after). Using the pseudo-CSS, it is not possible to break the line (of the label).

The image is a background image, so, depending on the length of the line the image dimension should be increased.

They are researching this and can’t provide any possible date to implement this.

I hope this explanation will help.

Thank You