[Solved] Tooltip in Mobile

Hi @june,

Please use this CSS code: 

@media screen and (max-width: 600px){
   #wpdcom[wpd-tooltip]:hover::after, [wpd-tooltip]:hover::before{
      display:none;
   }
}

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

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.

Hi @asti,

Thank you for your response.

I have applied the code and cleared cache for every mobile devices I'm checking on but it is not working. Please guide further. I would really appreciate your assistance.

Many thanks in advance.

@june,

Please show on the screenshot what exactly you need to hide and leave some example URL as well. 

@asti This is how they're showing on my mobile devices. So I want to hide them or at least adjust them within the given area so that they won't cut off from the sides.

@june,

Try this one:

@media screen and (max-width: 600px){
   [wpd-tooltip]::before, [wpd-tooltip]::after, .wpd-tooltip-content{
      display:none;
   }
}

It should work fine.  

Perfect! It works fine.

What if I want to keep the tooltip but in smaller size for mobile device. What settings would be needed?

@asti Also, I want to keep the tooltip for these three encircled icons. Please assist.

@june,

You should change this selector:

[wpd-tooltip]::before, [wpd-tooltip]::after, .wpd-tooltip-content

Yes, it worked perfectly. Thank you so much @asti

But I want to show the tooltip for only these three icons below.

 Please assist in this regard.

@june,

Please replace the code with the following one:

@media screen and (max-width: 600px){
   [wpd-tooltip]::before, [wpd-tooltip]::after, .wpd-tooltip-content{
        display: none;
   }
   #wpdcom .wpd-thread-filter .wpdf-reacted[wpd-tooltip]::before, #wpdcom .wpd-thread-filter .wpdf-reacted[wpd-tooltip]::after {
      display:block;
   }
   #wpdcom .wpd-thread-filter .wpdf-hottest[wpd-tooltip]::before, #wpdcom .wpd-thread-filter .wpdf-hottest[wpd-tooltip]::after {
      display:block;
   }
   .wc-field-submit [wpd-tooltip]::after{
       display:block;
   }
}

Don't forget to try on incognito mode.

Thank you so very much 😀 @asti

This is how I wanted it. I greatly appreciate it.