JavaScript - Image As A Tooltip... Visit This Website...... You Will Come To Know What Is My Probl

function obj_position(obj,id) {
    //Setup variables to hold position values
    var left = top = 0;
   
    if (obj.offsetParent) {
        do {
            //Get position values and put in variables
            left += obj.offsetLeft;
            top += obj.offsetTop;
        } while (obj = obj.offsetParent);
    }
    //Get alt content for tooltip
    var alt_message = document.getElementById(id).getAttribute('alt');
    return left+","+top+","+alt_message;
}
function display_tooltip(obj) {
    //Get the elementID first
    var elmID = obj.id;
   
    //First of all get the position data for current element
    //Also get the message to be displayed- contained in the alt
    var pos_mess = obj_position(obj,elmID);
   
    //Now splitup the returned string to get the lef _position, right
    //position and the message to be displayed
    var part = pos_mess.split(",");
   
    //Create variables for the parts
    var left_pos = part[0];
    var top_pos = part[1] - 18;
    var message = part[2];
   
    var container = document.getElementById('tooltip_container');
    var newdiv = document.createElement('div');
    newdiv.setAttribute('id','tooltip');
    newdiv.className = 'tooltip_style';
    newdiv.innerHTML = message;
   
    //Position div
    newdiv.style.position="absolute";
    newdiv.style.top=top_pos+"px";
    newdiv.style.left=left_pos+"px";
   
    //Append newly created div to container
    container.appendChild(newdiv);
   
}
function delete_tooltip() {
    var container = document.getElementById('tooltip_container');
    var old_div = document.getElementById('tooltip');
    container.removeChild(old_div);
}

<script type="text/javascript">
$(document).ready(function() {
    //Tooltips
    $(".tip_trigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var mousex = e.pageX - 90; //Get X coodrinates
        var mousey = e.pageY  - 400; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 90 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 90;
        } if ( tipVisY < 90 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 90;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
    });
});
</script>

<a style='margin-left: 10px; position:relative' class="tooltip" title="This is some text to display">

$(document).ready(function(){

    $("a.tooltip").live( {
        mouseenter:
            function(e){
                this.t = this.title;
                this.title = "";
                $("body").append("<p id='tooltip'>"+ this.t +"</p>");
                $("#tooltip")
                    .css("top",(e.pageY - 10) + "px")
                    .css("left",(e.pageX + 20) + "px")
                    .fadeIn("fast");
                var css_width = $('#tooltip').width();
                var text_width = $('#tooltip').textWidth();
                if (css_width > text_width) {
                    $('#tooltip').width(text_width);
                }
            },
        mouseleave:
            function(){
                this.title = this.t;
                $("#tooltip").remove();
            }
        }
    );

});

$.fn.textWidth = function textWidth() {
    var html_org = $(this).html(); 
    var html_calc = '<span>' + html_org + '</span>'; 
    $(this).html(html_calc); 
    var width= $(this).find('span:first').width(); 
    $(this).html(html_org); 
    return width;
}

<a style='margin-left: 10px; position:relative' class="tooltip" width="100" title="This is some text to display">

<a
 href="http://www.javascriptkit.com/dhtmltutors/ajaxticker/index.shtml"
 rel="htmltooltip">RSS Ajax Ticker</a>

<!--Inline HTML Tooltips (DIV with class="htmltooltip"-->
<!--Matched up with anchor links with rel="htmltooltip" and in the order they appear within page's source-->

  <li id='1tab_1a' class='selected'><a id='1link_1a'  title="Customer Info Screen"><span >Customer Info</span></a></li>
  <li id='1tab_1b' ><a id='1link_1b'  title="Order Detail"  ><span>Order</span></a></li>
 
 <li id='1tab_1c' ><a id='1link_1c'  title="Phone Detail" ><span>Phone:  7093521232</span></a></li>