触摸友好的工具提示

Question

有人知道包含移动设备解决方案的 Jquery 工具提示吗？由于悬停状态不起作用，我猜我需要一些在点击时也起作用的东西。也许它的行为就像点击时的模式框？只是把东西扔到这里。不确定最好的解决方案是什么。

--更新--

我真的很喜欢@Alveoli建议的解决方案，但我最终自己尝试了一下。我使用 qTip 作为基础，并编写了一些弗兰肯斯坦代码来创建触摸友好的工具提示和移动友好的模式框。任何优化代码的帮助将不胜感激。这是小提琴...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);
        }
    });
};

Answer 3

我曾经尝试过一个应用程序，它的工具提示是延迟加载的。例如，UI 上显示一个名为“提交”的按钮，3 秒后，标签“将数据提交到服务器”在“提交”按钮下方显示为工具提示。

考虑到新用户总是需要更多时间来完成操作，我认为这是实现工具提示的好方法。高级用户不会被打扰，而新用户在一段时间后可以看到工具提示。