jQuery titleClouds plugin

author: roXon

Some link 1
Some link 2
Some link 3

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"/>');
		   var el = $(this);
		   var ti = el.attr('title');   
				$('#tc').fadeTo(300, 1).html( ti );        
				el.attr('title', '');
				el.attr('title', ti);
• Copy-Paste the the titleClouds stylesheet into your .css file.
/* titleClouds CSS */
	border:1px solid #fff;
    background-color: rgba(0, 0, 0, 0.9);
	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">
		$('[title]').tclouds();  // =all elements that have the title attribute
		// or with a custom class: 
• 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!

tG tested in: IE 6/7/8, Mozilla 4/5, Opera, Chrome, Safari
roXon's titleClouds jQuery plugin v0.1_beta ~ 28.06.2011.

How to change...