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. M

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

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

Answer 3

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.