CSS tooltip on image

Question

I am beginer in creating of webpages and i would be grateful for an easy simple example of CSS tooltip on image with Html5 standard. I know there are some examples but they are kinda hard for me.

I know there are some examples but they are kinda hard for me. So why would it be any easier here? — Rick S
– Rick S, Commented Feb 25, 2015 at 18:58
I hope there are some people that have some experiance with teaching. I need an example without styles. Just basic simple CSS tooltip on image.. — tprieboj
– tprieboj, Commented Feb 25, 2015 at 19:00
check this css tooltip lists designerslib.com/tag/css-tooltip — Karuppiah RK
– Karuppiah RK, Commented Sep 14, 2015 at 12:09

Matt · Accepted Answer · 2016-11-15 12:41:55Z

4

Here is probably the simplest tooltip that takes advantage of the native title attribute of an element:

<style>
    p[title]:hover:after {
        content: attr(title);
        padding: 10px;
        background-color: white;
        position: absolute;  
    }
</style>

<p title="I am a tooltip!">Hover over me</p>

edited Nov 15, 2016 at 12:41

Matt

27.4k19 gold badges131 silver badges202 bronze badges

answered Feb 25, 2015 at 19:10

dwkd

2,8961 gold badge19 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS tooltip on image

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related