What is para tip you maybe asking? Simple answer is, it's a light weight tool tip plugin for jQuery. It's under 2kb in size.

Now down to the geeky stuff.

You will need jQuery 1.4.2 or newer for this, you can get it from jQuery.com

Step 1.
Create a file called paratip.js and save it, then copy and paste the following code into the file.

/*
 * jQuery Plugin : paraTip
 * by Paul Paradise
 * http://www.paulparadise.co.uk
 * Licensed Under GPL version 2 license.
 */
(function($){

    jQuery.fn.paraTip = function () {
       
        // append a div to the body
        var $tooltip = $('<div class="paraTip"></div>').appendTo('body');
       
        return this.each (function () {

            // get the title and alt values
            var originalTitle = $(this).attr('title');
            var originalAlt = $(this).attr('alt');

            var positionToolTip = function(event)
            {
                // get the position
                var tPosX = event.pageX + 15;
                var tPosY = event.pageY -10;
               
                // update the css
                $tooltip.css({top : tPosY, left: tPosX});
            }

            var showToolTip = function(event)
            {
                // set the title and alt tags to be empty
                $(this).attr('title', '');
                $(this).attr('alt', '');
               
                // set the title tag to be the tool tip texts
                $tooltip.text(originalTitle).show();
               
                // position tool tip
                positionToolTip(event);
            }

            var hideToolTip = function()
            {
                // reset the title and alt tag to original on hide
                $(this).attr('title', originalTitle);
                $(this).attr('alt', originalAlt);
               
                // hide tool tip
                $tooltip.hide();
            }

            $(this).hover(showToolTip, hideToolTip).mousemove(positionToolTip);
        });
    }
    
})(jQuery);

Step 2.
Create a file called custom.js, then copy and paste the following code into the file.

$(document).ready(function(){
    // Tool tip
    $('.tooltip').paraTip();
});

Step 3.
Create a file called paratip.css, then copy and paste the followin code into the file.

.paraTip {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    z-index: 200;
    padding: 5px;
    background: #E5E5E5;
    border: 1px solid #CCCCCC;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #333;
    -webkit-box-shadow: 0px 0px 4px #333;
    box-shadow: 0px 0px 4px #333;
}

Step 4.
Copy and paste the following code inside your head tags.

<link href="css/paratip.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/paratip.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

Now just add class="tooltip" and title="Tooltip text" to your links etc.

Please click here for a working demo and click here to download the above code.