CSS Tool-tip

<style type="text/css">

.tooltip{
  display: inline;
   position: relative;
   white-space: pre-wrap;       /* css-3 */
   margin: 20px 20px 20px 20px;
   height: 30px;
   width: 100px
}

.tooltip:hover:after{
   background: #33b5e5;
   border-radius: 5px;
   bottom: 26px;
   color: white;
   content: attr(tip);
   left: 20%;
   padding: 5px 15px;
   position: absolute;
   z-index: 98;
   width:auto;
   min-width:50px;
   max-width:500px;
}

.tooltip:hover:before{
   border: solid;
   border-color: #33b5e5 transparent;
   border-width: 6px 6px 0 6px;
   bottom: 20px;
   content: "";
   left: 50%;
   position: absolute;
   z-index: 99;
}

</style>

<div id="container" style="margin: 220px 135px 0px 0px; height: 400px">

    <a class="tooltip" tip="television">Tip1</a>
    <a class="tooltip" tip="In modern days, TV is behaving like a criminal teacher.">Tip2</a>

</div>

Output :)