qTip2 - My test case

by slicedtoad

HTML

<script src="http://qtip2.com/v/stable/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://qtip2.com/v/stable/jquery.qtip.css">
<div id="countries-panel" style="margin-top: 0">
    <div style="margin-top: 10px">
        <button id="USA" style="width: 70px; height: 20px"> <span>USA</span>
 <span style="background-color: rgb(255,0,0)"></span>

        </button>
    </div>
    <div style="margin-top: 10px">
        <button id="JP" style="width: 70px; height: 20px"><span>JP</span><span style="background-color: rgb(0,0,255)"></span>

        </button>
    </div>
</div>

JavaScript

// Create the tooltips only when document ready
$(document).ready(function () {
    var CountryToolTip = function (elementId, toolTipContent) {
        $(elementId).parent().qtip({
            overwrite: false,
            content: toolTipContent,
            once: false,
            show: {
                event: event.type,
                ready: true
            },
            position: {
                my: 'top center',
                at: 'top center',
                target: 'mouse',
                adjust: {
                    x: 0,
                    y: 10,
                    mouse: true
                }
            },
            style: {
                classes: "qtip-tooltip-for-ellipse"
            }
        }, event);
    }

    $('#USA').mouseover(function () {
        CountryToolTip("#USA", "United States of America");
    }).mouseout(function () {
        $("#USA").qtip('destroy', true);
    });

    $("#JP").mouseover(function () {
        CountryToolTip("#JP", "Japan");
    }).mouseout(function () {
        $("#JP").qtip('destroy', true);
    });
});