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

Answer 3

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

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

触摸友好工具提示

3 个答案: