[Resolved] Tooltip stylesheet

Home Forums Support [Resolved] Tooltip stylesheet

Home Forums Support Tooltip stylesheet

Viewing 8 posts - 1 through 8 (of 8 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

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

    #2069143
    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

    #2069356
    Elvin
    Staff
    Customer Support

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

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