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

I'm looking for the same thing and found this elegant solution:

http://osvaldas.info/blog/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

Bonus is that on a mobile it 'sticks' when you touch it and disappears when you touch it again.

Answer 2

I used to try an app, and its tooltips are lazy loaded. For example, a button called 'Submit' is displayed on the UI, and then 3 seconds later, the label 'Sumit your data to the server' shows as a tooltip below the 'Submit' button.

Considering the fresh users always need more time to completed actions, I think it is a good way to implement the tooltip. Senior users won't be bothered while fresh users could see the tooltip after a while.

Answer 3

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);
        }
    });
};