Power Tip - A jQuery plugin that creates hover tooltips

<div id="placement-examples">
    <h2>Placement examples (with smart placement)</h2>
    <div>
        <input type="button" id="north-west" value="North West" title="North west placement" />
        <input type="button" id="north" value="North" title="North placement" />
        <input type="button" id="north-east" value="North East" title="North east placement" /><br />
        <input type="button" id="west" value="West" title="West placement" />
        <input type="button" id="east" value="East" title="East placement" /><br />
        <input type="button" id="south-west" value="South West" title="South west placement" />
        <input type="button" id="south" value="South" title="South placement" />
        <input type="button" id="south-east" value="South East" title="South east placement" />
    </div>
</div>
<div id="mousefollow-examples">
    <h2>Mouse follow examples</h2>
    <div title="Mouse follow {followMouse: true}">
        The PowerTip for this box will follow the mouse.
    </div>
</div>
<div id="mouseon-examples">
    <h2>Mouse on to popup examples</h2>
    <div>
        The PowerTip for this box will appear on the right and you will be able to interact with its content.
    </div>
</div>
<div id="api-examples">
    <h2>API examples</h2>
    <input id="api-open" type="button" value="Show mouse-on tooltip" />
    <input id="api-close" type="button" value="Close any open tooltips" />
</div>

#placement-examples div {
    text-align: center;
}
#placement-examples input {
    background-color: #EEE;
    margin: 10px;
    padding: 10px 30px;
}
#placement-examples #east {
    margin-left: 200px;
}

#mousefollow-examples div {
    background-color: #EEE;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    padding: 50px 0;
}

#mouseon-examples div {
    background-color: #EEE;
    text-align: center;
    width: 200px;
    padding: 40px;
}

#api-examples input {
    background-color: #EEE;
    margin: 10px;
    padding: 10px 30px;
}

// placement examples
$('#north').powerTip({
    placement: 'n',
    smartPlacement: true
});
$('#east').powerTip({
    placement: 'e',
    smartPlacement: true
});
$('#south').powerTip({
    placement: 's',
    smartPlacement: true
});
$('#west').powerTip({
    placement: 'w',
    smartPlacement: true
});
$('#north-west').powerTip({
    placement: 'nw',
    smartPlacement: true
});
$('#north-east').powerTip({
    placement: 'ne',
    smartPlacement: true
});
$('#south-west').powerTip({
    placement: 'sw',
    smartPlacement: true
});
$('#south-east').powerTip({
    placement: 'se',
    smartPlacement: true
});


// mouse follow examples
$('#mousefollow-examples div').powerTip({
    followMouse: true
});


// mouse-on examples
$('#mouseon-examples div').data('powertipjq', $([
    '<p><b>Here is some content</b></p>',
    '<p><a href="http://stevenbenner.com/">Maybe a link</a></p>',
    '<p><code>{ placement: \'e\', mouseOnToPopup: true }</code></p>'
    ].join('\n')));
$('#mouseon-examples div').powerTip({
    placement: 'e',
    mouseOnToPopup: true
});


// api examples
$('#api-open').on('click', function() {
    $.powerTip.show($('#mouseon-examples div'));
});
$('#api-close').on('click', function() {
    $.powerTip.hide();
});