Lightweight jQuery extension for creating cursor tooltips that follow mouse movement and position.
Include the latest version of jQuery and jQuery.mousetip.js in the <head> of your HTML document:
<script src="jQuery.min.js"></script>
<script src="jQuery.mousetip.js"></script>Create an element with a class name tip and call the mousetip() method on the parent of said element. Modify the x and y parameters to change the tip position relative to the mouse cursor.
See the live demo: code.nath.co/mousetip
HTML
<div>Content<span class="tip">Mousetip 1</span></div>
<div>Content<span class="tip">Mousetip 2</span></div>
<div>Content<span class="tip">Mousetip 3</span></div>jQuery
$(function() {
// Default
$('div').mousetip('.tip');
// Custom Position
$('div').mousetip('.tip', 20, 30);
});CSS
span.tip {
/* Required */
position: absolute;
z-index: 2;
display: none;
/* Optional */
font-size: 15px;
max-width: 150px;
height: auto;
padding: 10px;
border-radius: 3px;
box-shadow: 0 1px 2px #666;
background: #FD0;
} If you discover any issues or have questions regarding usage, please send a message to code@nath.co or find me on GitHub @nathco.