A repository of over 1000 quality jQuery plugins

jQuery jQuery.mousetip

jQuery.mousetip is a jQuery UI plugin.

Created by nathco

Extension for cursor tooltips that follow mouse movement

Not what you're looking for? Click here to view more UI jQuery plugins


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: code.nath.co/mousetip


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

You might also like these other UI jQuery Plugins

  • translucent

    Translucent plastic card theme.

  • jQCloud

    jQuery plugin for drawing neat word clouds that actually look like clouds

  • toolgif

    A very simple Jquery gif tooltip plugin.