Live Code Editor Version 2.0

Tooltip Example RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        body {
            text-align: center;
        }

.tooltip {
            position: relative; 
            display: inline-block;
            border-bottom: 1px dotted black;

margin: auto;
            width: 150px;
            height: 35px;
            line-height: 35px;
            background: yellow;
            display: block;
            margin-top: 20px;
        }

.tooltip .tooltiptext {
            visibility: hidden;
            position: absolute;
            width: 120px;
            background-color: #555;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            border-radius: 6px;
            z-index: 1;
            opacity: 0;
            transition: opacity 1s;
        }

.tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
        .tooltip-top {
            bottom: 120%;
            left: 10%;
        }
        .tooltip-right {
            left: 110%;
            top: 7%;
        }
        .tooltip-right::after{
            content: "";
            position: absolute;
            top: 50%;
            right: 100%;
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent #555 transparent transparent;
        }
        .tooltip-bottom {
            top: 120%;
            left: 10%;
        }
        .tooltip .tooltip-bottom::after {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent #555 transparent;
        }
        .tooltip-left {
            right: 110%;
            top: -10%;
        }
        .tooltip-left::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 100%;
            margin-top: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent transparent #555;
        }
    </style>
    <link rel="stylesheet" href="./Font-Awesomecss/css/font-awesome.min.css">

<body>
        <h1>Học lập trình miễn phí tại Freetuts.net</h1>
        <div class="tooltip">
            Top!
            <span class="tooltiptext tooltip-top">Tooltip Top!</span>
        </div>
        <div class="tooltip">
            Bottom!
            <span class="tooltiptext tooltip-bottom">Tooltip Bottom!</span>
        </div>
        <div class="tooltip">
            Left!
            <span class="tooltiptext tooltip-left">Tooltip Left!</span>
        </div>
        <div class="tooltip">
            Right!
            <span class="tooltiptext tooltip-right">Tooltip Right!</span>
        </div>
    
    </body>
</html>