Create Custom Moving Tooltips With jQuery And CSS

A lightweight jQuery script to create customizable moving tooltips that make the tooltips always follow the cursor using jQuery mousemove method and CSS top & left properties.

How to use it:

1. Define the tooltip content in the data-tooltip attribute of any DOM elements such as text, images, inputs, and etc.

<img class="myTooltip" 
     data-tooltip="jQuery Script Net" 
     src="https://picsum.photos/600/400/?random">

<a href="#" 
   class="myTooltip" 
   data-tooltip="I am a tooltip">
   Hover me
</a>

...

2. Style and position the tooltips.

.tooltip {
  -webkit-transform: translate(-50%, -200%);
  transform: translate(-50%, -200%);
  display: none;
  position: absolute;
  color: #fafafa;
  background-color: #000;
  border: none;
  border-radius: 4px;
  padding: 15px 10px;
  z-index: 10;
  display: block;
  width: 100%;
  max-width: 200px;
  top: 0;
  left: 50%;
  text-align: center;
}

.tooltip:after {
  content: "";
  display: block;
  position: absolute;
  border-color: #000000 rgba(0, 0, 0, 0);
  border-style: solid;
  border-width: 15px 15px 0;
  bottom: -13px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  width: 0;
}

3. Load the latest version of jQuery JavaScript library at the end of the document.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 

4. The JavaScript to activate the tooltips. This will get the X and Y coordinates of the mouse pointer and automatically update the CSS top & left properties of your absolutely positioned tooltips every time the mouse moves.

$('.myTooltip').hover(function () {
   var title = $(this).attr('data-tooltip');
   $(this).data('tipText', title);
   if(title == ''){}
   else{
      $('<p class="tooltip"></p>').fadeIn(200).text(title).appendTo('body');
   }
}, function () {
   $(this).attr('data-tooltip', $(this).data('tipText'));
   $('.tooltip').fadeOut(200);
}).mousemove(function (e) {
   var mousex = e.pageX;
   var mousey = e.pageY;
   $('.tooltip').css({
       top: mousey,
       left: mousex
   })
});

---

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