jQuery Plugin To Create Tooltips That Follow Mouse - mousetip

mousetip is an extremely lightweight jQuery plugin to create absolute-positioned tooltips that always follow the mouse cursor.

How to use it:

1. Include jQuery mousetip plugin after jQuery library.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jQuery.mousetip.js"></script>

2. Wrap the tooltip content into an inline element as follow.

<div>Hover Me<span class="tip">Tooltip Content</span></div>

3. Make the tooltip absolute positioned.

.tip {
  position: absolute;
  z-index: 2;
  display: none;
} 

4. Style the tooltip whatever you like.

.tip {
  font-size: 15px;
  max-width: 150px;
  height: auto;
  padding: 10px;
  border-radius: 3px;
  box-shadow: 0 1px 2px #666;
  background: #34BC9D;
} 

5. Call the plugin on the parent element and specify the tooltip wrapper.

$('div').mousetip('.tip');

6. Set the relative position to the mouse cursor.

 // $.fn.mousetip(tip, x, y);
 $('div').mousetip('.tip', 20, 30);

---

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