PDA

View Full Version : Tooltip changes places



cryoffalcon
05-04-2012, 07:01 PM
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/2012/04/testing-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/2012/04/testing-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
05-05-2012, 10:55 AM
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
05-05-2012, 02:19 PM
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. ^_^