AI Assistant

Notifications

Clear all

[Solved] Tooltips cut off on mobile

Summarize Topic

Bug Reports

Last Post by Asti 6 years ago

9 Posts

2 Users

0 Reactions

2,140 Views

RSS

Posts: 40

goodlab

Topic starter

Translate ▼

Jul 13, 2020 5:41 pm

(@goodlab)

Eminent Member

Joined: 6 years ago

[#554]

Screenshot
https://share.getcloudapp.com/KouBRBA2

this is happening on mobile

I see you have
wpd-tooltip-position="left"
and
wpd-tooltip-size="long"

How do I change those to
wpd-tooltip-position="RIGHT"
and
wpd-tooltip-size="WIDE"

on mobile only?????

Topic Tags

tooltips mobile

8 Replies

Posts: 8300

Asti

Support

Translate ▼

Jul 14, 2020 11:14 am

(@asti)

Illustrious Member

Joined: 8 years ago

Hi @goodlab,

Please provide us some example URL to debug the issue and provide a solution for you.

In case you want to say thank you! 🙂
We'd really appreciate if you leave a good review on the plugin page.
This is the best way to say thank you to this project and the support team.

7 Replies

goodlab

(@goodlab)

Joined: 6 years ago

Eminent Member

Posts: 40

Jul 14, 2020 4:53 pm

Reply to

Asti

Translate ▼

@asti sorry, forgot to include url
https://www.inyourgarage.com/listings/1968-dodge-dart-gts-numbers-matching/

Asti

Support

(@asti)

Joined: 8 years ago

Illustrious Member

Posts: 8300

Jul 15, 2020 11:29 am

Reply to

goodlab

Translate ▼

@goodlab,

Could you please let us know on which devices you see the issue?

In case you want to say thank you! 🙂
We'd really appreciate if you leave a good review on the plugin page.
This is the best way to say thank you to this project and the support team.

goodlab

(@goodlab)

Joined: 6 years ago

Eminent Member

Posts: 40

Jul 15, 2020 3:50 pm

Reply to

Asti

Translate ▼

@asti Iphone. Safari and Firefox. Didn't try chrome yet

Asti

Support

(@asti)

Joined: 8 years ago

Illustrious Member

Posts: 8300

Jul 15, 2020 5:13 pm

Reply to

goodlab

Translate ▼

@goodlab,

Please try this code:

@media screen and (max-width: 600px){
    [wpd-tooltip-position="left"]::after {
        left: 31%;
        top: 50%;
        margin-left: 157%;
    }
}

Put the code in the Top Admin Bar > Customize > Additional CSS > "Additional CSS" textarea, save it, delete all caches and check again.

Please don't forget to press Ctrl+F5 (twice) on the frontend before checking.

Also, please try on incognito mode if you're checking on mobile devices. Because mobile browsers have a hard cache, you'll not be able to see the change immediately.

In case you want to say thank you! 🙂
We'd really appreciate if you leave a good review on the plugin page.
This is the best way to say thank you to this project and the support team.

goodlab

(@goodlab)

Joined: 6 years ago

Eminent Member

Posts: 40

Jul 16, 2020 2:48 pm

Reply to

Asti

Translate ▼

@asti Thanks, it worked, kind of. Now the entire tooltip is visible but is is squished to the left of the flag, and the pointer parts is covering some of the text, and the mouse is pointer is still on top so more of the text is covered.

goodlab

(@goodlab)

Joined: 6 years ago

Eminent Member

Posts: 40

Jul 17, 2020 11:32 pm

Reply to

Asti

Translate ▼

@asti Hi, checking in on this

Asti

Support

(@asti)

Joined: 8 years ago

Illustrious Member

Posts: 8300

Jul 18, 2020 3:22 pm

Reply to

goodlab

Translate ▼

@goodlab,

You should use this js code:

if (jQuery(window).width()) {
   jQuery.each(jQuery('.comment_flag[wpd-tooltip]'), function () {
      jQuery(this).attr('wpd-tooltip-position', 'top');
   });
}

Note: the CSS code provided by us was removed from the textarea.

Here is an instruction: https://www.collectiveray.com/add-javascript-to-wordpress

In case you want to say thank you! 🙂
We'd really appreciate if you leave a good review on the plugin page.
This is the best way to say thank you to this project and the support team.