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/

[Author]

Posts