jQuery Default Plugin Boilerplate

Workable / Testable jQuery Default Plugin Boilerplate

by bizamajig

HTML

<div id="fun">
    <p><b>This is a tooltip test</b></p>
    <hr />
    <a href="#" title="Hello world 1" id="link1" class="tooltips">Tooltip 1</a> !<br />
    <a href="#" title="Hello world 2" id="link2" class="tooltips">Tooltip 2</a> !<br />
    <hr />
    <a href="javascript:void(0);" id="remove">Remove Tooltip n°2</a>
</div>

CSS

body { 
    padding: 20px 100px;
    font: 14px/20px Verdana;
    color: black;
}
a.tooltips {
    color: orange;
    text-decoration:none;
}
.myTooltipElement { /* Example for a miniml tooltip styling */
    background:rgba(0,0,100,.5);
    color:rgba(255,255,255,.8);
    position: absolute;
    zIndex:  999;
    padding:2px 6px;
    border-radius:5px;
}
a#remove {
    font-size:10px;
    color:grey;
}

JavaScript

/*
    Workable / Testable jQuery Default Plugin Boilerplate
        Doc : http://docs.jquery.com/Plugins/Authoring
        Edit : http://jsfiddle.net/molokoloco/DzYdE/
        Download : https://github.com/molokoloco/FRAMEWORK/blob/master/jquery.plugins/jquery.tooltips.js
        Comments or suggests : http://www.b2bweb.fr/molokoloco/jquery-default-plugin/
    
    Sources code examples (jQuery Plugins Patterns Boilerplates)… :
        https://github.com/jquery-boilerplate/patterns/tree/master/patterns
        http://addyosmani.com/resources/essentialjsdesignpatterns/book/#designpatternsjquery
        http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/
        http://kenneth.kufluk.com/blog/2010/08/chaining-asynchronous-methods-in-jquery-using-the-queue/  
*/


///////////////////////////////////////////////////////////////////////////
//      Fichier à enregistrer sous le nom "jquery.tooltip.js"            //
///////////////////////////////////////////////////////////////////////////


(function($) { // our plugin is inside a closure, it keep the NameSpace safe
    
    var plugName = 'tooltip'; // Our plugin base name !
        debug    = true;      // Edit here to debug ;)
    
    var privatesMethods = {   // Privates plugin methods
        
        reposition: function(event) { // Move tooltip
            var mousex = event.pageX + 20, // Get event X mouse coordinates
                mousey = event.pageY + 20;
            
            $(this).data(plugName)['tooltip'].css({top: mousey+'px', left: mousex+'px'});
        },
        
        show: function(event) {
            if (debug) console.log(plugName+'.show()');
            var $this  = $(this), // Current link
                data   = $this.data(plugName); // Current tooltip data
   
            data['tooltip'].stop(true, true).fadeIn(600); // Start animation
            $this.on('mousemove.'+plugName, privatesMethods.reposition); // Listen mousemove, updating tooltip...