Create Popup Layers That Follow Mouse Movement - mousefollow.js

A simple-to-use jQuery mouse follow plugin for showing popup layers containing any web content that follows mouse movement and position.

The smart plugin will automatically reposition the popup when the element is placed at the edge of the screen.

A typical use of this plugin is to show the large version of an image when you hover over the thumbnail.

How to use it:

1. To use this plugin, you need to load the JavaScript jquery.mousefollow.js after jQuery.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="js/jquery.mousefollow.js"></script>

2. Call the function on the target element and specify the html content to show in the popup when hovering over.

<div class="element">
  ...
</div>

$('.element').mousefollow({
  html: 'any html content here'
});

3. By default, the plugin will insert the html content into a popup element with the class of 'js-follow'. You can customize the popup element in the CSS as follows:

.js-follow {
  /* your styles here */
}

4. Customize the animation speed of the fade effect.

$('.element').mousefollow({
  html: 'any html content here',
  speed: 500 // default: 200
});

5. Customize the x/y offsets of the popup element.

$('.element').mousefollow({
  html: 'any html content here',
  x: 20, 
  y: 20 
});

6. You're also allowed to override the default CSS of the popup element.

$('.element').mousefollow({
  html: 'any html content here',
  className: 'js-follow'
});

---

This awesome jQuery plugin is developed by julien-its. For more Advanced Usages, please check the demo page or visit the official website.