Tooltip changes places

[cryoffalcon]

Hi,
I am using a tooltip that uses the following javascript

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

As you can see I have set its X position at -90 and y position at -400 so that It could be displaying well when the mouse is hover over a link and it do appear well in the testing page http://bloghutsbeta.blogspot.com/201...slidernav.html
If you put your mouse over ALEX in 'A' category BUT from the same test site but in different location from above here http://bloghutsbeta.blogspot.com/201...ting-main.html if you put your mouse over ALEX under 'SIMULATION' category then you will see that the tooltip is way down.

Not even that the tooltip moves away if the screen resolution changes. I changed value again and again but didn't reach any conclusion, can someone help me with this issue as what to do to fix it?

Note: If you require a complete markup please let me know in comment, I considered it not required that's why I didn't added it to my post ^^

[jscheuer1]

First you have to normalize what element the tip is being positioned in. I'd go for the body, and you're using the variable tip as an undeclared global, that's not the best idea as it may conflict with other global variables and/or not represent what you expect it to all of the time.

I'd try something like so, get rid of this (from elsewhere in the page's source code):

<script type='text/javascript'>
$('.tip_trigger').hover(function()
{
   // retrieve the image inside this element
   var elem = $(this).find('img');

   // set the 'src' to the 'data-original' value
   elem.attr('src', elem.data('original'));
});
</script>

And change the code from your post to:

<script type="text/javascript">
$(document).ready(function() {
    //Tooltips
	$(".tip_trigger").hover(function(){
		// retrieve the tip image that was inside this element
		var elem = $(this).data('tip');

		// set the 'src' to the 'data-original' value
		elem.attr('src', elem.data('original'));
	}).each(function(){
		var trig = $(this);
		trig.data('tip', trig.find('.tip')); // create portable reference to the tip
		$('body').append(trig.data('tip')); //normalize position by appending to the body
	}).hover(function(){
		$(this).data('tip').show(); //Show tooltip
	}, function() {
		$(this).data('tip').hide(); //Hide tooltip
	}).mousemove(function(e) {
		var mousex = e.pageX + 10; //Get X coodrinates
		var mousey = e.pageY + 10; //Get Y coordinates
		var tip = $(this).data('tip');
		if(!tip || !tip.size || !tip.size()){return;}
		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() + $(window).scrollLeft() - (mousex + tipWidth);
		//Distance of element from the bottom of viewport
		var tipVisY = $(window).height() + $(window).scrollTop() - (mousey + tipHeight);

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

[cryoffalcon]

First you have to normalize what element the tip is being positioned in. I'd go for the body, and you're using the variable tip as an undeclared global, that's not the best idea as it may conflict with other global variables and/or not represent what you expect it to all of the time.

I'd try something like so, get rid of this (from elsewhere in the page's source code):

<script type='text/javascript'>
$('.tip_trigger').hover(function()
{
   // retrieve the image inside this element
   var elem = $(this).find('img');

   // set the 'src' to the 'data-original' value
   elem.attr('src', elem.data('original'));
});
</script>

And change the code from your post to:

<script type="text/javascript">
$(document).ready(function() {
    //Tooltips
	$(".tip_trigger").hover(function(){
		// retrieve the tip image that was inside this element
		var elem = $(this).data('tip');

		// set the 'src' to the 'data-original' value
		elem.attr('src', elem.data('original'));
	}).each(function(){
		var trig = $(this);
		trig.data('tip', trig.find('.tip')); // create portable reference to the tip
		$('body').append(trig.data('tip')); //normalize position by appending to the body
	}).hover(function(){
		$(this).data('tip').show(); //Show tooltip
	}, function() {
		$(this).data('tip').hide(); //Hide tooltip
	}).mousemove(function(e) {
		var mousex = e.pageX + 10; //Get X coodrinates
		var mousey = e.pageY + 10; //Get Y coordinates
		var tip = $(this).data('tip');
		if(!tip || !tip.size || !tip.size()){return;}
		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() + $(window).scrollLeft() - (mousex + tipWidth);
		//Distance of element from the bottom of viewport
		var tipVisY = $(window).height() + $(window).scrollTop() - (mousey + tipHeight);

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

I love your methods and actually you are the only reason that I visit dynamic drive, to me this is best place just because of you. I am thankful to you for everything that you have done for me, It matters alot to me. Thanks alot for being one awesome human being and THE BEST person here on Dynamic Drive. You have completely resolved my issue. ^_^