[Solved] Tooltips cut off on mobile

Hi @goodlab,

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

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

@goodlab,

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

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

@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.

@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.

@asti Hi, checking in on this

@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