Usefull Things

 <a href="#" class="purple" data-title="My site"> Link </a> 
 <a href="#" title="My site"> Link </a>
                               <tr>
            <td data-title="My site">
                <input type="text" data-title="My site" />
                <span class="tooltip tooltip2">vikas</span>
            </td>
            <td data-title="My site">
                <input type="text" data-title="My site" />
                <span class="tooltip tooltip2">vikas</span>
            </td>
               </tr>
                                                          

<style>
    [data-title] { position: relative;display: inline-block;}
    [data-title]:hover:after {opacity: 1;transition: all 0.1s 
                 ease 0.5s;visibility: visible;}
    [data-title]:after {content: attr(data-title);background-color: red;
            color: #111;font-size: 150%;position: absolute;padding: 1px 5px 2px 5px;
            bottom: -1.6em;left: 0; white-space: nowrap;box-shadow: 1px 1px 3px #222222;
            opacity: 0;border: 1px solid #111111;z-index: 99999;visibility: hidden;}
    .purple[data-title]:after {background-color: purple!important;color: #111;}
     input[data-title] {display: inline-block;}
        
    </style>

purpule
Link





vikas

<ul >
   <li><a href="#">link1</a>
       <div>
            Inner link 1.1 <br />
            Inner link 1.1 <br />
            Inner link 1.1 <br />
       </div>
    </li>
   <li><a href="#">link2</a>
       <div>
            Inner link 2.1 <br />
            Inner link 2.1 <br />
            Inner link 2.1 <br />
       </div>
    </li>
   <li><a href="#">link3</a>
       <div>
           Inner link 3.1 <br />
           Inner link 3.1 <br />
           Inner link 3.1 <br />
       </div>
    </li>
</ul> 

<style type="text/css">
    ul  li{ display:inline-block;padding:10px 20px;
                border:1px solid gray }
    ul li div{position:absolute;display:none;
                border:1px solid red }
    ul li:hover div{display:block }
</style>

• link1
  Inner link 1.1
  Inner link 1.1
  Inner link 1.1
• link2
  Inner link 2.1
  Inner link 2.1
  Inner link 2.1
• link3
  Inner link 3.1
  Inner link 3.1
  Inner link 3.1

<div class="container"> 
    <div class="relative-box">
        <p>Relative Box</p>
    </div>
        <div>WELCOME TO THE CRMHIKE TUTORIAL.</div>
    <div class="absolute-box">
       <p>Absolutely box</p>
    </div>  
</div> 

<style type="text/css">
  .container {border: 2px solid black;
  position:relative;
}
.relative-box {width: 100px; height: 100px; background-color: blue;
  color:white;
  border: 2px solid black;
  position:relative;
  top:50px;
  left:50px;
}
.absolute-box {width: 100px; height: 100px; background-color: red;
  color:white;
  border: 2px solid black;
  position:absolute;
  left:20PX; 
  top:20px;
}
</style>