Touch Friendly Tooltip

Question

Anyone know of a Jquery tool tip that includes a solution for mobile devices? Since the Hover state doesn't work, I'm guessing I need something that also works on click. Maybe it behaves like a modal box on click? Just throwing stuff out here. Not sure what the best solution would be.

-- Update --

I really like the solution @Alveoli suggested, but I ended up taking a stab at it myself. I used qTip as my base and wrote some Frankenstein'd code to create both touch friendly tooltips and mobile friendly modal boxes. Any help optimizing the code would be greatly appreciated. Here is the fiddle...http://jsfiddle.net/cssguru/NQRBT/

Answer 1

You could use jQuery UI Tooltip and make sure that the tooltip is closed on any touch in the page as follows:

initTooltip = function ($el) {
    var closeTooltipOnClick = function (e) {

        // This code if for touch devices only.
        // We want to tooltip to close, when we touch
        // anywhere on the page, except if we touch on
        // the link itself.

        if ($(e.target).closest($el).size()) {
            // We just clicked on the link, so let's
            // not close the tooltip.
            return;
        }

        $('body').off('touchend', closeTooltipOnClick);
        $el.tooltip('close');
    };

    $el.tooltip({
        open: function () {

            if (!Modernizr.touchevents) {
                return;
            }
            // We make sure that the tootlip closes on
            // touch devices if there is a touch event anywhere.
            $('body').on('touchend', closeTooltipOnClick);
        }
    });
};