Hello,
How can I hide tooltip in mobile?
Notifications
Clear all
Oct 09, 2021 1:04 am
11 Replies
Oct 09, 2021 10: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 6: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.
Translate
▼
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
Please show on the screenshot what exactly you need to hide and leave some example URL as well.
Oct 10, 2021 5: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.
Translate
▼
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
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 6: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 8:08 pm
Translate
▼
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
You should change this selector:
[wpd-tooltip]::before, [wpd-tooltip]::after, .wpd-tooltip-content
Oct 11, 2021 9: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.
Translate
▼
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
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