[Resolved] Tooltip stylesheet

Home Forums Support Tooltip stylesheet

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #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?

    #1021750
    David
    Staff
    Customer Support

    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….

    #1022183
    Kristian Ole

    Hi David,

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

    #1022195
    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!

    #1022342
    David
    Staff
    Customer Support

    Awesome 🙂 Glad to be of help

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.