Search the blog

This code takes an element, div.moving-popup, and shows and positions it near the mouse pointer whenever the mouse is over a certain element, div.my-el. div.moving-popup is hidden once the mouse leaves div.my-el.

Use the values in css() to adjust the offset.

var $movingPopup = $('div.moving-popup');

$('div.my-el').hover(function() {

    $movingPopup.show();

}, function() {

	$movingPopup.hide();

}).trigger('hover');

$document.mousemove(function(event) {

	$movingPopup.css({
		
		left: (event.pageX - 75) + 'px',
		top:  (event.pageY - 75) + 'px'
		
	});

});
Tim Bennett is a web designer and developer. He has a First Class Honours degree in Computing from Leeds Metropolitan University and currently runs his own one-man web design company, Texelate.