触摸友好的工具提示答案

【问题标题】：Touch Friendly Tooltip触摸友好的工具提示
【发布时间】：2011-08-26 00:24:16
【问题描述】：

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

-- 更新--

我真的很喜欢@Alveoli 建议的解决方案，但我最终自己尝试了一下。我使用 qTip 作为我的基础并编写了一些科学怪人的代码来创建触摸友好的工具提示和移动友好的模态框。任何优化代码的帮助将不胜感激。这是小提琴...http://jsfiddle.net/cssguru/NQRBT/

【问题讨论】：

标签： jquery mobile tooltip

【解决方案1】：

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

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

奖励是，在移动设备上，当你触摸它时它会“粘住”，当你再次触摸它时它就会消失。

【讨论】：

虽然有点破损。我还没有进一步测试，但至少在 Android 上的 Chrome 中，如果页面被放大，工具提示的位置会不正确。
我喜欢这个工具。有人试过用这个工具使用丰富的标记吗？

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：