Results 1 to 3 of 3

Thread: Tooltip changes places

  1. #1
    Join Date
    Mar 2012
    Posts
    53
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Tooltip changes places

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

    Code:
    <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 ^^

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

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

    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:

    Code:
    <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    cryoffalcon (05-05-2012)

  4. #3
    Join Date
    Mar 2012
    Posts
    53
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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):

    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:

    Code:
    <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. ^_^

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •