wpDiscuz - WordPress Comment Plugin
Share:
Notifications
Clear all

[Solved] Tooltip in Mobile

Page 1 / 2

June
Posts: 10
 June
Topic starter
(@june)
Active Member
Joined: 3 weeks ago

Hello,

How can I hide tooltip in mobile?

11 Replies
Asti
Posts: 3580
 Asti
Support
(@asti)
Support member
Joined: 4 years ago

Hi @june,

Please use this CSS code: 

@media screen and (max-width: 600px){
   #wpdcom[wpd-tooltip]after, [wpd-tooltip]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.

June
Posts: 10
 June
Topic starter
(@june)
Active Member
Joined: 3 weeks ago

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.

1 Reply
Asti
 Asti
Support
(@asti)
Joined: 4 years ago

Support member
Posts: 3580

@june,

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

June
Posts: 10
 June
Topic starter
(@june)
Active Member
Joined: 3 weeks ago

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

Screenshot 20211010 163413 Samsung Internet
Screenshot 20211010 163436 Samsung Internet
1 Reply
Asti
 Asti
Support
(@asti)
Joined: 4 years ago

Support member
Posts: 3580

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

June
Posts: 10
 June
Topic starter
(@june)
Active Member
Joined: 3 weeks ago

Perfect! It works fine.

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

June
Posts: 10
 June
Topic starter
(@june)
Active Member
Joined: 3 weeks ago

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

Screenshot 20211010 185923 Samsung Internet

 

1 Reply
Asti
 Asti
Support
(@asti)
Joined: 4 years ago

Support member
Posts: 3580

@june,

You should change this selector:

[wpd-tooltip]::before, [wpd-tooltip]::after, .wpd-tooltip-content
June
Posts: 10
 June
Topic starter
(@june)
Active Member
Joined: 3 weeks ago

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

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

Screenshot 20211010 185923 Samsung Internet

 Please assist in this regard.

1 Reply
Asti
 Asti
Support
(@asti)
Joined: 4 years ago

Support member
Posts: 3580

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

Page 1 / 2
Share: