"@charlespattson Happy Birthday Mate! 🥳"

@ashleyford 2 days ago

"I think this sums things up quite nicely."

@ashleyford 4 days ago

Designer and web developer, Co-founder and Technical Director at Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]

Build a jQuery Plugin


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.


 $.fn.tooltip = function() { 



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.

 $.fn.tooltip = function(options) {

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


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);


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


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" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> | Build a jQuery Plugin</title>

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="jquery.tooltip.js"></script>
$(document).ready(function() {

		color: '#fff',
		tipColor: '#333'



	border:1px solid #333;
	text-shadow:0px 1px #000;




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


demo download


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

Designer and web developer, Co-founder and Technical Director at Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]

Comments 2
  • Eduardo Matos
    Posted on

    Eduardo Matos Eduardo Matos

    Reply Author

    You can ‘return this’ to allow chaining.

  • Beben Koben
    Posted on

    Beben Koben Beben Koben

    Reply Author

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