Pure CSS tooltip

http://www.scriptol.com/css/tooltip.php

by brasofilo

HTML

<div> 
    <a class="tooltip" href="">
        Demonstration
        <span>
            <img src="http://www.scriptol.com/images/apache.png" />
            <h3>How use my site</h3>
            The description with an image.
        </span>
    </a>
</div>

CSS

body {
    background-color:#eee;
    padding:15%;
    font-family:sans-serif;
}

.tooltip {
    text-decoration:none;
    position:relative;
}
.tooltip span {
    display:none;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    color:black;
    background:white;
}
.tooltip span img {
    float:left;
    margin:0px 8px 8px 0;
}
.tooltip:hover span {
    display:block;
    position:absolute;
    top:0;
    left:0;
    z-index:1000;
    width:250px; /* not working with auto :( */
    max-width:320px;
    min-height:78px;
    border:1px solid black;
    margin-top:12px;
    margin-left:32px;
    overflow:hidden;
    padding:8px;
}