[Resolved] Tooltip stylesheet

Home Forums Support [Resolved] Tooltip stylesheet

Home Forums Support Tooltip stylesheet

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

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

    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!

    Customer Support

    Awesome 🙂 Glad to be of help


    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?



    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

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

    A wise man once said:
    "Have you cleared your cache?"

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