qTip2 - Demo - Mouse tracking

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

by edwardmsmith

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-viewport">
    <div id="drag">
        <h4>Drag me around!</h4>
 
        <label for="my">tooltip</label>
        <select id="my">
            <option value="top left" selected="selected">top left</option>
            <option value="top right">top right</option>
            <option value="top center">top center</option>
            <option value="bottom left">bottom left</option>
            <option value="bottom right">bottom right</option>
            <option value="bottom center">bottom center</option>
            <option value="left top">left top</option>
            <option value="left bottom">left bottom</option>
            <option value="left center">left center</option>
            <option value="right top">right top</option>
            <option value="right bottom">right bottom</option>
            <option value="right center">right center</option>
            <option value="center">center</option>
        </select>
 
        <label for="at">target</label>
        <select id="at">
            <option value="top left">top left</option>
            <option value="top right">top right</option>
            <option value="top center">top center</option>
            <option value="bottom left">bottom left</option>
            <option value="bottom right"  selected="selected">bottom right</option>
            <option value="bottom center">bottom center</option>
            <option value="left top">left top</option>
            <option value="left bottom">left bottom</option>
            <option value="left center">left center</option>
            <option value="right top">right...

CSS

#drag{
    position: absolute;
    left: 20%;
    top: 30%;
    width: 250px;
    padding: 5px 10px;
 
    background: #fafafa;
    background: rgba(244,244,244,0.7);
 
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0,0,0,.2);
 
    text-align: center;
    font-weight: bold;
    font-size: 11px;
 
    cursor: move;
    z-index: 99999;
}
 
#drag h4{ text-align: center; }
 
#drag select{ cursor: auto; }
 
.qtip-wiki{
    max-width: 440px;
}
 
    .qtip-wiki .qtip-content{
        padding: 10px;
        line-height: 12.5px;
    }
 
    .qtip-wiki h1{
        margin: 0 0 7px;
 
        font-size: 1.5em;
        line-height: 1em;
    }
 
    .qtip-wiki img{ padding: 0 10px 0 0; }
 
    .qtip-wiki p{ margin-bottom: 9px; }
    .qtip-wiki .note{ margin-bottom: 0; font-style: italic; color: #888; }

JavaScript

$(document).ready(function()
{
    $('#drag').qtip({
        content: {
            text: 'Loading...',
            title: 'Wikipedia - Tawny Owl',
            ajax: {
                url: '/projects/qtip2/data/tawnyowl.php'
            },
        },
        position: {
            at: $('#at').val(),
            my: $('#my').val(),
            viewport: $(window),
            adjust: {
                method: $('#adjust_method').val(),
                x: parseInt($('#adjust_x').val(), 10) || 0,
                y: parseInt($('#adjust_y').val(), 10) || 0
            }
        },
        show: {
            event: false,
            ready: true
        },
        hide: false,
        style: 'qtip-wiki'
    })
 
    // Make it draggable using jQuery UI, and update qTip position when dragging stops
    .draggable({ stop: function() { $(this).qtip('reposition'); } })
    .mousedown(function(e){ e.stopPropagation(); }) // Stop text selection
 
    // Change the qtip options upon dropdown change
    .children('select').bind('change blur keypress', function() {
        var what = $(this).attr('id').replace(/_/g, '.'),
 
        val = $(this).val();
        val = !isNaN(parseInt(val)) ? parseInt(val) : val;
 
        $(this).parent().qtip('option', 'position.' + what, val);
    })
});