Hello,
How can I hide tooltip in mobile?
Oct 08, 2021 9:04 pm
11 Replies
Oct 09, 2021 6:48 am
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.
Oct 09, 2021 2:44 pm
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.
Please show on the screenshot what exactly you need to hide and leave some example URL as well.
Oct 10, 2021 1:41 pm
@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.
Try this one:
@media screen and (max-width: 600px){
[wpd-tooltip]::before, [wpd-tooltip]::after, .wpd-tooltip-content{
display:none;
}
}
It should work fine.
Oct 10, 2021 2:12 pm
Perfect! It works fine.
What if I want to keep the tooltip but in smaller size for mobile device. What settings would be needed?
Oct 10, 2021 4:08 pm
You should change this selector:
[wpd-tooltip]::before, [wpd-tooltip]::after, .wpd-tooltip-content
Oct 11, 2021 5:03 pm
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.
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
Next
