Guide for created a tooltip simple?

[binboy]

Why in following code(example) tooltip box come out from page, how can it fix as automatic(dynamic) with page that not come out from page?

Demo: http://jsfiddle.net/3UzDG/ (i mane is about how that mouse over on it display toltip box out page) SEE image:

http://img4up.com/up2/09767175214682154052.gif

$('li a').hover(function() {



var title = $(this).next('.tooltip').html();

var offset = $(this).offset();



$tooltip = $('
').addClass('show_tooltip').html(title);



var delay = setTimeout(function() {



$('body').append($tooltip);

var width = $tooltip.outerWidth();



var p_top = offset.top;

var p_left = offset.left - width;

$tooltip.css({top: p_top, left: p_left}).fadeIn(180);



},280);



$(this).data('delay', delay);

$(this).data('tooltip', $tooltip);



},function() {



delay = $(this).data('delay');

$tooltip = $(this).data('tooltip');

$tooltip.remove();

clearInterval(delay);



});

[Mottie]

Hi binboy!

All you need to do is check if the tooltip height plus the offset height is more than the window height (meaning the tooltip will go off screen). I added these two lines under the “p_top” defintion

var tt_ht = $tooltip.height();

p_top = (p_top + tt_ht > $('window').height()) ? p_top - tt_ht : p_top;

And updated the demo.

It should get the correct tooltip height since jQuery reveals the tooltip quickly (you shouldn’t be able to see it) to get the height, but I’m not sure it’s 100% correct since the about tooltip seems to shift up as well.

[binboy]

Now see it: it must dynamic for set with page: http://jsfiddle.net/3UzDG/3/ what do i do?

[Author]

Posts