触摸友好工具提示

Question

有人知道Jquery工具提示,其中包含移动设备的解决方案吗？由于悬停状态不起作用,我猜我需要一些也适用于点击的东西.也许它在点击时表现得像一个模态框？把东西丢在这里.不确定最佳解决方案是什么.

- 更新 -

我非常喜欢@Alveoli建议的解决方案,但我最终还是自己捅了一下.我使用qTip作为我的基础并编写了一些Frankenstein的代码来创建触摸友好工具提示和移动友好模式框.任何优化代码的帮助将不胜感激.这是小提琴...... http://jsfiddle.net/cssguru/NQRBT/

Answer 1

我正在寻找相同的东西,并找到了这个优雅的解决方案:

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

奖金是指在手机上它会在你触摸它时"粘住"并在你再次触摸时消失.

Answer 2

您可以使用jQuery UI 工具提示并确保工具提示在页面中的任何触摸时关闭，如下所示：

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