Tooltip position on hover

Question

I have simple image preview on hover.

jQuery

jQuery('img').hover( function(){ jQuery('body').append('<div id="image_preview"><img src="'+ jQuery(this).attr('src') +'" alt="Image preview" /></div>'); jQuery('.camera_info img').mousemove( function(event){ jQuery('#image_preview').css('top', (event.pageY - 10) + 'px').css('left', (event.pageX + 30) + 'px').fadeIn('normal'); } ); }, function(){ jQuery('#image_preview').remove(); } );

CSS:

#image_preview { border: 1px solid #CCCCCC; display: none; padding: 5px; position: absolute; }

The problem is that if the image is too close to the side of the browser it shows after it like here:

I tried to play with right position, but with no luck... Can someone help me on this problem?

There's no point re-inventing the wheel; use qtip2, problem solved. — Rory McCrossan
– Rory McCrossan, Commented Jan 22, 2013 at 15:09
@RoryMcCrossan If they use their own plug-in on the page you've linked, it's not handling OP's issue : (. — Teemu
– Teemu, Commented Jan 22, 2013 at 15:16
@RoryMcCrossan Nope, OP want's to see the whole image, when it appears near to the edge of the viewport. — Teemu
– Teemu, Commented Jan 22, 2013 at 15:20

mrk · Accepted Answer · 2013-01-22 21:21:42Z

Here's something I was using to keep an element's top and bottom within the viewable area of a browser -- in my case, I didn't have to worry about handling an element's left/right coordinate, but the below code could be adjusted to handle that as well.

The function takes an HTMLElement as an argument, ie return value of $('#someid').get(0) or document.getElementById('someid') and uses jQuery throughout.

function moveIntoView (elem) { var w$ = $(window), elem$ = $(elem), docViewTop = w$.scrollTop(), docViewBottom = docViewTop + w$.height(), elTop = elem$.offset().top, elBottom = elTop + elem$.height(); // element top is lower than top of document in view // and element bottom is higher than bottom of document in view, so nothing to do if( ((docViewTop <= elTop) && (docViewBottom >= elBottom))) return; elem$.css("top", parseInt(elem$.css("top")) - (elBottom - docViewBottom)); }

Collectives™ on Stack Overflow

Tooltip position on hover

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related