Tooltip bug with non-English characters

Hi,

Tooltips in languages other than English breaks the style of the theme on Safari. Please find the attached. It seems Safari doesn’t understand font-size: 0; very well.

Attachments:

You must be logged in to view attached files.

I managed to work around it by using “overflow: hidden”. It works for the mentioned problem but there are still two problems:

1. There’s many tooltips on the theme and it’s not easy to apply this fix to all of them; it needs a common css class.

2. As you can see in the screenshot, the tooltip text is not centered properly and this problem exists on other browsers too.

Regards,

Attachments:

You must be logged in to view attached files.

Even with overflow:hidden, there’s still some problem as shown in the attached file.

Attachments:

You must be logged in to view attached files.

Hello,

Yes, we know this bug and working on it. As for now, try to add the following code snippet to the Custom CSS section in Theme Settings

.browser-Safari .product-grid-item.woodmart-hover-base .woodmart-buttons>div a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.browser-Safari .product-grid-item.woodmart-hover-base.hover-width-small:not(.product-in-carousel) .woodmart-buttons>div a {
    width: 40px;
}

Regards

I tried to use a different style and chose “icons and add to cart on hover”, but on this one, tooltips are not shown altogether! Please find the attached.

Attachments:

You must be logged in to view attached files.

Try to add this code also

.browser-Safari .product-grid-item .woodmart-buttons>div a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

Thanks, it worked but the label is clipped in case the translation is long

Attachments:

You must be logged in to view attached files.

You can decrease tooltips font size to fix this for example

body .woodmart-tltp .woodmart-tooltip-label {
	font-size:10px;
}

It didn’t help, maybe I need to look for a shorter translation. That would be great if it could go beyond the boundaries of its parent, I tried to remove overflow: hidden of its parent, but it messed up other elements. That’s not a big issue though, I’m just saying.

Thanks

We understand, but this overflow should be hidden for other styles and we can’t remove it. So it would be better to make some shorter word there.

Thanks,

Also we need some css modification here, (please see the second attached)
There’s some gap.

(Sorry, I couldn’t delete the first attached file)

Attachments:

You must be logged in to view attached files.

Hello,

Try to use the following CSS code also

div.woodmart-wishlist-info-widget > a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 0;
    width: 40px;
}

Regards

[Author]

Posts