Skip to content
Extension for cursor tooltips that follow mouse movement
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.
jQuery.mousetip.js Initial Commit May 14, 2015


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>

How to Use

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:


<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>


$(function() {
    // Default
    // Custom Position
    $('div').mousetip('.tip', 20, 30);


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 or find me on GitHub @nathco.

You can’t perform that action at this time.