Simple Customised Tooltip Example Using Jquery

HTML Structure: 

<div id="tooltipList">
<ul>
<li ><a class="tooltip" rel="Glimmer is great! Thanks MIX Online.">I'm a text Tooltip. Hover over me for an example.a>li>
<li ><a class="tooltipImage" rel="http://visitmix.com/labs/glimmer/samples/images/100x100_oomph.jpg">And me, I'm an Image Tooltip. Hover over me to see an image.a>li>
ul>
div>

CSS Structure:

#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
color:#fff;
}

#tooltipList ul
{
margin:0px;
padding:0px;
}

#tooltipList li
{
display:block;
margin-bottom:20px;
}

Jquery Code:

jQuery(function($) {
     /*Text Tooltip*/

$('.tooltip').bind('mouseover', mouseoverActiontooltip);

    $('.tooltip').bind('mouseout', mouseoutActiontooltip);

    $('.tooltip').bind('mousemove', mousemoveActiontooltip);
     /*Text Tooltip*/

   /*Image Tooltip*/
    $('.tooltipImage').bind('mouseover', mouseoverActiontooltipImage);

    $('.tooltipImage').bind('mouseout', mouseoutActiontooltipImage);

    $('.tooltipImage').bind('mousemove', mousemoveActiontooltipImage);

/*Image Tooltip*/
});

function mouseoverActiontooltip(event) {
    $("body").append("

" + this.rel + "

");
    $("#tooltip").css("left", (event.pageX + 20) + "px");
    $("#tooltip").css("top", (event.pageY - 10) + "px");
}

function mouseoutActiontooltip(event) {
    $("#tooltip").remove();
}

function mousemoveActiontooltip(event) {
    $("#tooltip").css("left", (event.pageX + 20) + "px");
    $("#tooltip").css("top", (event.pageY - 10) + "px");
}



function mouseoverActiontooltipImage(event) {
    $("body").append("

+ this.rel + ">

");
    $("#tooltip").css("left", (event.pageX + 20) + "px");
    $("#tooltip").css("top", (event.pageY - 10) + "px");
}

function mouseoutActiontooltipImage(event) {
    $("#tooltip").remove();
}

function mousemoveActiontooltipImage(event) {
    $("#tooltip").css("left", (event.pageX + 20) + "px");
    $("#tooltip").css("top", (event.pageY - 10) + "px");
}

You can view the demo on http://jsfiddle.net/ragu556/5vQLB/2/