<!DOCTYPE html>

<html>

<style>

.tooltip {

    position: relative;

    display: inline-block;

    border-bottom: 1px dotted black;

}

.tooltip .tooltiptext {

    visibility: hidden;

    width: 120px;

    background-color: black;

    color: #fff;

    text-align: center;

    border-radius: 6px;

    padding: 5px 0;

    /* Position the tooltip */

    position: absolute;

    z-index: 1;

}

.tooltip:hover .tooltiptext {

    visibility: visible;

}

</style>

<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me

  <span class="tooltiptext">Tooltip text</span>

</div>

<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in an desirable way.</p>

</body>

</html>