[Resolved] Tooltip stylesheet

[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?

[David]

Hi 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/

[Kristian Ole]

Hi David,

Thanks – i will try that out. And this code will be responsive and work on mobile, correct?

[Kristian 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!

[David]

Awesome 🙂 Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Valeriu]

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!

[Valeriu]

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

[Elvin]

Hi @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?"

[Author]

Posts