Use your left/right keys to browse tutorials
Build a jQuery Plugin

Build a jQuery Plugin

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on October 17, 2010

Delving into the inner workings of jQuery and plucking up the courage to build a jQuery plugin can be a daunting task. In this tutorial I’m going to run through the basics of creating a tooltip plugin.

We’re going to concentrate more on the plugin construction rather than the tooltip functionality outcome although i’ll show you how to add default values to a plugin that can be overridden when adding the plugin to your page.

Step One

The first thing to do is to extend the jQuery object with the function that we wish to add. So In our case, we wish to add a tooltip to each element on the page that has the “tip” class . So to start, create a jquery.tooltip.js file and save it with the following code.


(function($){

 $.fn.tooltip = function() { 

 };

})(jQuery);

You might have heard that plugin developers shouldn’t user the $ alias, as other lobraries use the $ alias and this can lead to conflicts. Above you can see that we’re passing ‘jQuery’ into the function allowing us to use any alias we want. For the ease of getting to grips with plugin creation we’re going to stick with using the $ alias but this makes sure that our plugin wont conflict.

Step Two

The next thing to do is create the functionality for the user to be able to customise the plugin. While making the plugin as flexible as possible we also need to provide some default values so the user isn’t forced into providing a list of parameters. We’ll be using the jQuery extend method to do this.

(function($){
 $.fn.tooltip = function(options) {

  var defaults = {
   color: '#ffffff',
   tipColor: '#000000'
  };
  var options = $.extend(defaults, options);
    
// this is where our main plugin bits go

 };
})(jQuery);

Step Three

This is the final code for our plugin. Save this in your the file we created earlier jquery.tooltip.js.

(function ($) {
    $.fn.tooltip = function (options) {

        var defaults = {
            color: '#ffffff',
            tipColor: '#000000'
        };
        var options = $.extend(defaults, options);

        $(this).hover(

        function () {
            $(this).append($('<div class="tooltip" style="color:' + options.color + '; background-color:' + options.tipColor + ';">' + $(this).attr('title') + ' <div class="tip-bottom"></div></div>'));
        }, function () {
            $(this).find('.tooltip').remove();
        });

    };
})(jQuery);

Step Four

Now left wrap up and use the plugin in action. To make the plugin work all you need to do is give each link or href the class ‘tip’ along with a title attribute with the tooltip text in.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Papermashup.com | Build a jQuery Plugin</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="jquery.tooltip.js"></script>
<script>
$(document).ready(function() {

   $('.tip').tooltip({		 
		color: '#fff',
		tipColor: '#333'
	 }); 
});

</script>

<style>
.tip{
	position:relative;
	}

.tooltip{
	display:inline;
	font-size:12px;
	position:absolute;
	bottom:40px;
	left:-10%;	
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	background-color:#000;
	border:1px solid #333;
	color:#FFF;
	text-align:center;
	text-shadow:0px 1px #000;
	min-width:180px;
	padding:5px;}	

.tip-bottom{
	position:absolute;
	bottom:-11px;
	left:20%;
	width:23px;
	height:11px;
	background-image:url('tip.png');
	background-repeat:repeat;
	}

</style>
</head>

<body>

<a href="http://papermashup.com" title="This is the text that will be displayed in out tooltip" class="tip">Hover Over Me!</a>

</body>
</html>

demo download

Conclusion

This has been a basic example of how to make a simple jQuery tooltip plugin. The possibilities are endless when it comes to plugin development and you can find out more here



More tutorials from Papermashup
  • http://tutorial-city.net/ Eduardo Matos

    You can ‘return this’ to allow chaining.

  • http://beben-koben.blogspot.com/ Beben Koben

    hohohho, its so usefully my friend…
    thanks a lot, sometimes i’m read from w3school web too ;)
    cheers ^^