css tooltip

css tooltip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>CSS3 tooltip</title>
    <style type="text/css">
        .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;
        }
    </style>
</head>
<body>
    <br><br><br><br>
    <a href="http://www.javatospring.com" title="This is some information for our tooltip." class="tooltip">
        <span title="More">CSS3 Tooltip</span></a>
</body>
</html>