popupText

by honkskillet

HTML

<!DOCTYPE html>
<title>CSS3 tooltip</title>
<body>
    <br />
    <br />
    <br />
    <br />
<span class="popup" popupText="This is some popup text">Locate </span>
<img src="http://upload.wikimedia.org/wikipedia/en/thumb/f/f4/The_Scream.jpg/220px-The_Scream.jpg"
    />
<br />Hello<br />Howdy<br />Hey<br />
<a href="#" title="This is some information for our tooltip." class="tooltip"><span title="More">CSS3 Tooltip</span>
    </a>
</body>

</html>

CSS

.popup{
    position:absolute;
    border: solid;
    border-color: #333 ;
    border-width: 1px;
    width:220px;
    height:280px;
}


.popup:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 300px;
    content: "";
    left: 40px;
    position: absolute;
    z-index: 99;
}

.popup:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 306px;
    color: #fff;
    content: attr(popupText);
    left: 20px;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 150px;
}
/**/		
    .tooltip{
        display: inline;
        position: relative;
    }
    
    .tooltip:hover:after{
        background: #333;
        background: rgba(0,0,0,.8);
        border-radius: 5px;
        bottom: 26px;
        color: #fff;
        content: attr(title);
        left: 20%;
        padding: 5px 15px;
        position: absolute;
        z-index: 98;
        width: 220px;
    }
    
    .tooltip:hover:before{
        border: solid;
        border-color: #333 transparent;
        border-width: 6px 6px 0 6px;
        bottom: 20px;
        content: "";
        left: 50%;
        position: absolute;
        z-index: 99;
    }