Simple CSS Tooltip For your Web Page, Blog and Web Application

Simple css tool tip code for you web page,blog web application.Using this tool tip to easy convey the information to site viewers.

If you want say any in formation over the text use the tool tip to say the what kind of work can be do after click the link.Are give the information over the text in the paragraph etc.,

Mouse Over Me

.tooltip{
display: inline;
position: relative;
}

.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}

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

<a href="#" title="information come up when your mover on this link." class="tooltip"><span title="More">Tool Tip</span></a>