jQuery Tooltip Advanced

Workable / Testable jQuery Default Plugin Boilerplate

HTML

<div id="fun">
    <p><b>This is a tooltip test</b></p>
    <hr />
    <a href="#" id="link1" class="tooltips" title="It's a test">Tooltip 1</a> !<br />
    <a href="#" id="link2" class="tooltips" title="Click to update">Tooltip 2</a> !<br />
    <a href="#" class="tooltips" data-url="http://www.b2bweb.fr/_COURS/api.php?id=link2">Tooltip AJAX</a> !<br />
    <a href="http://home.b2bweb.fr" class="tooltips">Tooltip HREF</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
    V1.5.3 - 12/07/13 - Molokoloco - Copyleft

        Demo : http://jsfiddle.net/molokoloco/E3DbT/
        Download : https://github.com/molokoloco/FRAMEWORK/blob/master/jquery.plugins/jquery.tooltips.js
        Blog : http://www.b2bweb.fr/molokoloco/jquery-default-plugin/

    Sources code examples (jQuery Plugins Patterns Boilerplates) :

        http://docs.jquery.com/Plugins/Authoring
        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/
*/

///////////////////////////////////////////////////////////////////////////
//                           Usage examples                              //
///////////////////////////////////////////////////////////////////////////

/*
    // Example of HTML setup ////////////////////

    <a href="#" id="link1" class="tooltips" title="It's a test">Tooltip 1</a> !<br />
    <a href="#" id="link2" class="tooltips" title="Click to update">Tooltip 2</a> !<br />
    <a href="#" class="tooltips" data-url="http://www.b2bweb.fr/_COURS/api.php?id=link2">Tooltip AJAX</a> !<br />
    <a href="https://github.com/molokoloco/FRAMEWORK/blob/master/jquery.plugins/jquery.tooltips.js" class="tooltips">https://github.com/molokoloco/FRAMEWORK/blob/master/jquery.plugins/jquery.tooltips.js</a> !<br />
    <hr />
    <a href="javascript:void(0);" id="remove">Remove Tooltip n°2</a>

    // Example CSS styling ////////////////////

    .myTooltip {
        background:rgb(30, 145, 212);
        background:rgba(30, 145, 212, 0.9);
        color:#FFFD69;
        position: absolute;
        z-index: 9999999;
        padding:4px 8px;
       ...