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.