How to use it:

• You need jQuery!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

• Create a reference to the titleClouds plugin:

<script type="text/javascript" src="tclouds.js"></script>

• Save the plugin into a text file and rename it as: tclouds.js

// SIMPLE jQuery TITLE tooltip plugin //
// titleClouds - by roXon //
(function($) {
    $.fn.tclouds = function() {	
        var tcEl = this;	
		$('body').append('<div id="tc"/>');
		$(document).mousemove(function(mTC){
			$("#tc").css({top:(mTC.pageY+15)+"px",left:(mTC.pageX+12)+"px"});
		});
		tcEl.each(function(){
		   var el = $(this);
		   var ti = el.attr('title');   
		   el.hover(function(){
				$('#tc').fadeTo(300, 1).html( ti );        
				el.attr('title', '');
			},function(){
				$('#tc').hide().html('');
				el.attr('title', ti);
			});
		});
    };
})(jQuery);

• Copy-Paste the the titleClouds stylesheet into your .css file.

/* titleClouds CSS */
#tc{
	display:none;
	position:absolute;
	z-index:999999;
	max-width:160px;
	padding:10px;
	
	border:1px solid #fff;
    color:#fff;
	
    background-color: rgba(0, 0, 0, 0.9);
	filter:alpha(opacity=90);
	opacity: 0.9;
	-moz-opacity:0.9;
	
	-webkit-border-radius: 	10px;
	-moz-border-radius: 	10px;
	border-radius: 			10px; 
	-webkit-box-shadow: 0px 0px 5px 0px #fff;
	-moz-box-shadow: 	0px 0px 5px 0px #fff;
	box-shadow: 		0px 0px 5px 0px #fff; 
}
/* END titleClouds */

• To reference the desired elements that will be handled by the plugin, just list them into a .tclouds() function like:

<script type="text/javascript">
	$(document).ready(function(){
		$('[title]').tclouds();  // =all elements that have the title attribute
		// or with a custom class: 
		//$('.myCustomClass').tclouds();
	});
</script>

• Than, in your html just add a title attribute and enter a description for the listed elements like:

<h2 title="I am the <i>title</i> of this element">Title example</h2>

Title example

That's all!