'Coda Popup Bubbles' - adding a 'close' button for touch devices
<p>I'm using 'Coda Popup Bubbles' following <a href="http://jqueryfordesigners.com/coda-popup-bubbles/" rel="nofollow">this tutorial</a> (<a href="http://jqueryfordesigners.com/demo/coda-bubble.html" rel="nofollow">see demo page here</a>) and all is working nicely on my desktop machine: hovering over trigger element makes the popup appear &amp; moving the mouse away from the popup causes it to disappear after a short delay.</p>

<p>However, when viewed on a touch device (i.e. my iPad) the popup appears when the trigger element is tapped (as expected) but it then remains on screen as there is no 'mouseout' action to make it disappear again. My solution was to add a small 'close' button to the popup, but my jQuery skills are not too great and I'm not sure of the best way to add this to the code.</p>

<p>Here's the code I have:</p>

<pre><code>$(function () {
    $('.popup-container').each(function () {
        // options
        var distance = 10;
        var time = 250;
        var hideDelay = 500;
        var hideDelayTimer = null;
        var height = $('.popup', this).height();

        // tracker
        var beingShown = false;
        var shown = false;

        var trigger = $('.trigger', this);
        var popup = $('.popup', this).css('opacity', 0);

        // set the mouseover and mouseout on both element
        $([trigger.get(0), popup.get(0)]).mouseover(function () {

            // stops the hide event if we move from the trigger to the popup element
            if (hideDelayTimer) clearTimeout(hideDelayTimer);

            // don't trigger the animation again if we're being shown, or already visible
            if (beingShown || shown) {
                return;
            } else {
                beingShown = true;

                // reset position of popup box
                popup.css({
                    top: -(height + 5),
                    left: -15,
                    display: 'block' // brings the popup back in to view
                })

                // (we're using chaining on the popup) now animate it's opacity and position
                .animate({
                    top: '-=' + distance + 'px',
                    opacity: 1
                }, time, 'swing', function () {
                    // once the animation is complete, set the tracker variables
                    beingShown = false;
                    shown = true;
                });
            }
        }).mouseout(function () {
            // reset the timer if we get fired again - avoids double animations
            if (hideDelayTimer) clearTimeout(hideDelayTimer);

            // store the timer so that it can be cleared in the mouseover if required
            hideDelayTimer = setTimeout(function () {
                hideDelayTimer = null;
                popup.animate({
                    top: '-=' + distance + 'px',
                    opacity: 0
                }, time, 'swing', function () {
                    // once the animate is complete, set the tracker variables
                    shown = false;
                    // hide the popup entirely after the effect (opacity alone doesn't do the job)
                    popup.css('display', 'none');
                });
            }, hideDelay);
        });
    });
});
</code></pre>

<p>...I guess I need to duplicate the 'mouseout' function and attach it to a 'click' action on the 'close' button, but my pathetic attempts at this have failed miserably :-)</p>

<p>Any guidance would be greatly appreciated. Thanks!</p>
