Search code examples
csshtmlimagetooltip

CSS tooltip on image

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.

Solution

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