qTip2 - Demo - Mouse tracking

Position your tooltips in relation to the mouse using in-built mouse tracking.

by craga89

HTML

<script src="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip_new/packages/nightly/jquery.qtip.css">
<link rel="stylesheet" href="http://media1.juggledesign.com/qtip2/css/demos.css">
<link rel="stylesheet" href="http://media1.juggledesign.com/qtip2/css/master.css">
<div id="demo-mouse" class="box">
    <h3>Hover over this box to see mouse tracking in action</h3>
</div>

CSS

/* Add some nice box-shadow-ness to the modal tooltip */
#ui-tooltip-modal{
    max-width: 420px;

    -moz-box-shadow: 0 0 10px 1px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 10px 1px rgba(0,0,0,.5);
    box-shadow: 0 0 10px 1px rgba(0,0,0,.5);
}

#ui-tooltip-modal .ui-tooltip-content{
    padding: 10px;
}

JavaScript

$(document).ready(function()
{
    $('#demo-mouse').qtip({
        content: 'I position myself at the current mouse position',
        position: {
            my: 'top left',
            target: 'mouse',
            viewport: $(window), // Keep it on-screen at all times if possible
            adjust: {
                x: 10,  y: 10
            }
        },
        hide: {
            fixed: true // Helps to prevent the tooltip from hiding ocassionally when tracking!
        },
        style: 'ui-tooltip-shadow'
    });
});