Jquery based Tooltip

[cryoffalcon]

Hi,
I have this code from once existed site sohtanaka.com which got hacked and now doesn't exist anymore (has highly effected many people who used to follow it).
Well I am not able to understand how to make the tooltip appear next to my mouse pointer, in the script below there are many widths and heights. Not even that there are + (plus sign) and - (minus sign). So its confusing me, If someone could explain the co-ordinates, so I could use it properly.

If I have to be more specific I am not able to understand these four lines of code all other is understandable

var mousex = e.pageX + 50; //Get X coodrinates
        var mousey = e.pageY  - 340; //Get Y coordinates

and these two

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;
        }

<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 + 50; //Get X coodrinates
        var mousey = e.pageY  - 340; //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>

[devnull69]

e.pageX and e.pageY will give you the coordinates of the mouse relative to the document (e is the event object which will automatically be handed over to the method). It adds 50 to the x coordinate and substracts 340 from the y coordinate to place the tooltip to the right top of the mouse coordinates.

The second set of lines just checks if the tooltip still fits on the screen (if it's too far right or down) and otherwise correct the coordinates accordingly

[webgrid]

If interested in a jquery tooltip called qtip2 that works great and is greatly supported.

[WolfShade]

I like qTip2, and I also like overLib. Very easy to implement either of them.

^_^

[vinoth06]

Hi Friends, Instead of going for JQuery Tool Tips, why can't you try CSS3 based tool tip. So that the page and tool tips will load faster. Check this CSS3 tool tip