- This topic has 7 replies, 2 voices, and was last updated 4 months, 3 weeks ago by
Elvin.
-
AuthorPosts
-
September 29, 2019 at 1:29 am #1021650
Kristian Ole
Right now im using this plugin (https://codecanyon.net/item/css3-tooltips-for-wordpress/7416713) to show a tooltip when mouse over the word “Annoncer-info”: https://lånon.dk/. I can see in Googlepagespeed that it load to many things for this little tooltip.
Is there any way to show it with css?
September 29, 2019 at 5:32 am #1021750David
StaffCustomer SupportHi there,
you could do something like this – first the HTML:
<a href="#" class="tool-tip">My tool tip<span class="tool-tip-wrap"><span class="tool-tip-content">This my tooltip content</span></span></a>
Then this CSS:
.tool-tip { position: relative; } .tool-tip-wrap { position: absolute; top: 0; left: -20px; padding-top: 2em; display: block; width: 200px; opacity: 0; transition: opacity 0.2s ease-out; } .tool-tip-content { display: block; padding: 20px; border: 4px solid #ddd; background-color: #fff; box-sizing: border-box; } .tool-tip:hover .tool-tip-wrap { opacity: 1; } .tool-tip-wrap:after { content: ''; position: absolute; display: block; width: 0; height: 0; top: 1.6em; left: 20px; border-left: 8px solid transparent !important; border-right: 8px solid transparent !important; border-top: 0 !important; border-bottom: 8px solid #ddd; }
It has the same behaviour as the tooltip plugin – which isn’t great on mobile….
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 29, 2019 at 7:21 pm #1022183Kristian Ole
Hi David,
Thanks – i will try that out. And this code will be responsive and work on mobile, correct?
September 29, 2019 at 7:49 pm #1022195Kristian Ole
I have just tested it here https://xn--lnon-qoa.dk/registreret-rki-uden-sikkerhed/ and seems to work good on mobile also – Thanks for the help!
September 30, 2019 at 3:45 am #1022342David
StaffCustomer SupportAwesome 🙂 Glad to be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/January 4, 2022 at 10:43 am #2069103Valeriu
Ok, the tooltip is somehow OK, I see a small problem with transparency over the social badge
but I might do something wrong – I will check again.Anyway, the question is: the text is fine, but how can I add image and social badges to the tooltip?
And some bold or H3 to text? Is there a level of customization?Thanks!
January 4, 2022 at 11:06 am #2069143Valeriu
Ok, I see how to add an image. Customization is a problem. I want to make something like the image uploaded. Any chances?
Here’s the image: open
January 4, 2022 at 4:00 pm #2069356Elvin
StaffCustomer SupportHi @Valeriu
Can you open a new topic for this? So we can check the site you’re working on and to avoid convoluting/derailing topics opened by other users.
Thanks. 😀
A wise man once said:
"Have you cleared your cache?" -
AuthorPosts
- You must be logged in to reply to this topic.