Tooltip stylesheet

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

Hi David,

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

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!

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?

Thanks!

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

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. :D