<style>

.center {

  text-align:center;

  margin-top:200px;

}

.tooltip {

    position: relative;

    display: inline-block;

    border-bottom: 1px dotted black;

}

.tooltip .tooltiptext {

    visibility: hidden;

    width: 120px;

    background-color: #555;

    color: #fff;

    text-align: center;

    border-radius: 6px;

    padding: 5px 0;

    position: absolute;

    z-index: 1;

    bottom: 100%;

    left: 50%;

    margin-left: -60px;

}

.tooltip:hover .tooltiptext {

    visibility: visible;

}

.tooltiptext::after {

    content: "";

    position: absolute;

    top: 100%;

    left: 50%;

    margin-left: -5px;

    border-width: 5px;

    border-style: solid;

    border-color: #555 transparent transparent transparent;

}

</style>

<body>

  <div class="center">

    <div class="tooltip" >Hello World!

       <span class="tooltiptext">this is tooltip!</span>

    </div>

  </div>

</body>