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
Comments
2 discussions around Build a jQuery Plugin
  1. You can ‘return this’ to allow chaining.

  2. Beben Koben says:

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





Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.