Tooltip bug with non-English characters

This topic has 11 replies, 2 voices, and was last updated 6 years, 8 months ago by Artem Temos.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
January 3, 2018 at 8:51 am #31367

MoeMauphie
Participant

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.

January 3, 2018 at 9:30 am #31369

MoeMauphie
Participant

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.

January 3, 2018 at 9:58 am #31373

MoeMauphie
Participant

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.

January 3, 2018 at 10:21 am #31375
Artem Temos
Keymaster
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
January 3, 2018 at 10:21 am #31376

MoeMauphie
Participant

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.

January 3, 2018 at 10:33 am #31381
Artem Temos
Keymaster
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;
}
```
January 3, 2018 at 11:28 am #31386

MoeMauphie
Participant

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

Attachments:
You must be logged in to view attached files.

January 3, 2018 at 1:09 pm #31395
Artem Temos
Keymaster
You can decrease tooltips font size to fix this for example
```
body .woodmart-tltp .woodmart-tooltip-label {
	font-size:10px;
}
```
January 3, 2018 at 1:18 pm #31400

MoeMauphie
Participant

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

January 3, 2018 at 1:19 pm #31401

Artem Temos
Keymaster

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.

January 3, 2018 at 3:51 pm #31438

MoeMauphie
Participant

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.

January 4, 2018 at 7:10 am #31467
Artem Temos
Keymaster
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