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

Tooltip images outside of mobile screens

Sebastian Kaiser

Hi there,

I really like your plugin – just bought the lifetime license. But I have one issue with the tooltip images on mobile screens.

I found the ticket https://getwooplugins.com/ticket/100652/ which describes kind of the same problem but not entirely.

The tooltip images on the desktop appear just as they should and look beautiful.

tooltip-images-desktop.PNG

 

On mobile, however, the variation swatches take up the whole width of the screen. That leads to the tooltip image being pushed out of the screen to the left and the right, respectively.

tooltip-images-mobile.PNG

You can test this yourself here: https://tonlieb.at/shop/testprodukt-armband-katze-kopie/

Is there a way to add CSS code and make the tooltip image appear within the screen all the time, regardless of where the swatch-circle is?

Thanks in advance.

Best, Sebastian

Hakik Zaman

Hi Sebastian,

Thanks for reaching out to us. Unfortunately, it is not possible to adjust it as you described.

Because your tooltip image width is 300px. Where a standard mobile screen width is 400px/412px.

Thank You

Sebastian Kaiser

Hi Hakik,

thanks for your reply. Can you tell me what another approach to solve this could look like? What is the default idea of your plugin to be displayed on mobile screens?

Do I have to change the width of the tooltip image? Frankly, I don’t really understand why it shouldn’t be possible to fit a 300px wide image in a standard mobile screen of 400/412px? Can you elaborate on that?

It is crucial for my client-project to make this work on mobile.

Thanks, Sebastian

Hakik Zaman

Hi Sebastian,

Can you tell me what another approach to solve this could look like? What is the default idea of your plugin to be displayed on mobile screens?

Unfortunately, there is no workaround for this. The tooltip displays when you hover over the swatches. On the mobile screen, you can’t hover the swatches. You can try the following CSS at Appearance > Customize > Additional CSS:

@media screen and (max-width: 900px){
   .wvs-has-image-tooltip:before{
      width: 100px;
      height: 120px;
   }
}

Frankly, I don’t really understand why it shouldn’t be possible to fit a 300px wide image in a standard mobile screen of 400/412px? Can you elaborate on that?

Images are displayed over each swatch. Some swatches are left/right edge of the screen. Then how you can fit a 300px image while your screen size is 400px? BTW, some of the tooltip images are 512px on your site.

Thank You

Sebastian Kaiser

Hi Hakik,

even though you can hover on mobile, the tooltip images are being shown when you select a swatch on mobile. Therefore, there needs to be a way to show those images without appearing to be wrong or broken.

Your CSS suggestion does not really help, as the images need to keep a certain size to be readable.

If you always try to display the tooltip-image centered above the swatch, you’re correct. There will be an issue displaying the ones on the left and right edges. What I am looking to accomplish is to center the tooltip-image and have the triangle move to the appropriate swatch to indicate the relation between swatch and tooltip. I made a mockup to show you what I mean.

https://imgur.com/a/Pr39ot4 (imgur because somehow the editor here doesn’t let me embed images anymore)

I think that would be a smart solution. However, I cannot seem to make it work with CSS. Do you see a CSS solution here? Can the triangle be “detached” from the tooltip itself?

I know that one image has a bigger size, thanks for the hint. I’m still experimenting with the actual size, how big it needs to be in order to be readable.

Thanks, Sebastian

Hakik Zaman

Hi Sebastian,

You can try this:

@media screen and (max-width: 900px){
.wvs-has-image-tooltip:before, [data-wvstooltip]:before{
position: fixed;
top: 0;
}
.wvs-has-image-tooltip:after,
.wvs-has-image-tooltip:after{
display: none;
}
}

This is the best I can do for you.

Thank You

Sebastian Kaiser

Hi Hakik,

thank you, but unfortunately that doesn’t look good and the positioning is bad once the user keeps scrolling.

Isn’t there any way to apply dynamic centering to the tooltip? Like margin: auto? That is more or less the only thing that needs to be achieved, but I cannot make it work in CSS myself.

Thanks, Sebastian

Hakik Zaman

Hi Sebastian,

Isn’t there any way to apply dynamic centering to the tooltip?

Unfortunately, it is not possible. Tooltip’s main wrapper position: relative;. So the margin: auto; will not work. The only solution is position: fixed for .wvs-has-image-tooltip:before which I already have given in my last reply.

Thank You

Sebastian Kaiser

Hi Hakik,

is there some way to request this to be fixed in future releases? Even if I keep the tooltip-image settings to default, as soon as I have swatches reaching the edges of the mobile screen, it “breaks” as the image shoots out of the screen borders.

So it’s faulty how it is solved on your side for mobile views. Do you agree on this?

I would love to use your plugin for my client projects, but for now not all of your features seem to be compatible to mobile screens.

Thanks, Sebastian

Hakik Zaman

Hi Sebastian,

I will discuss it with our development team. We are on our Eid Vacation. After opening our office I will push the development team to check it further for you. If they can find a workable solution I will get back to you.

Unfortunately, right now, I am unable to speed up this process.

Thanks in advance for your patience.

Sebastian Kaiser

Hi Hakik,

thank you. It would be really great if you’d decide to make tooltip images mobile friendly soon.

Looking forward to your response.

Thanks, Sebastian

Hakik Zaman

Hi Sebastian,

Please update the Variation Swatches plugin. The version is 2.0.21.

Then check the tooltip using your mobile device.

Thank You