Pure CSS3 Tooltip

In this post we're going to create a beautiful tooltip only using CSS3 and Html. Tooltips are a useful way to show the important infomations about the link/images to improve the user experence of your website.

How to use it:

1. Add CSS

<style type="text/css">
	
	.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;
	}
	
</style>

2. Markup

<a href="#" title="Your Informations" class="tooltip">
<span title="More">jQueryScript.Net</span>
</a>

---

This awesome jQuery plugin is developed by webdesignerdepot. For more Advanced Usages, please check the demo page or visit the official website.