jQuery 触摸友好工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7198756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Touch Friendly Tooltip
提问by Adam Youngers
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. Maybe it behaves like a modal box on click? Just throwing stuff out here. Not sure what the best solution would be.
有人知道包含移动设备解决方案的 Jquery 工具提示吗？由于悬停状态不起作用，我猜我需要一些也可以在点击时起作用的东西。也许它在点击时表现得像一个模态框？就是把东西扔在这里。不确定最好的解决方案是什么。
-- Update --
- 更新 -
I really like the solution @Alveoli suggested, but I ended up taking a stab at it myself. I used qTip as my base and wrote some Frankenstein'd code to create both touch friendly tooltips and mobile friendly modal boxes. Any help optimizing the code would be greatly appreciated. Here is the fiddle...http://jsfiddle.net/cssguru/NQRBT/
我真的很喜欢@Alveoli 建议的解决方案，但我最终自己尝试了一下。我使用 qTip 作为我的基础并编写了一些 Frankenstein 的代码来创建触摸友好的工具提示和移动友好的模式框。任何优化代码的帮助将不胜感激。这是小提琴...... http://jsfiddle.net/cssguru/NQRBT/
回答by Alveoli
I'm looking for the same thing and found this elegant solution:
我正在寻找同样的东西并找到了这个优雅的解决方案：
http://osvaldas.info/blog/elegant-css-and-jquery-tooltip-responsive-mobile-friendly
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.
额外的好处是，在手机上，当你触摸它时它会“粘住”，当你再次触摸它时它会消失。
回答by Pierre Spring
You could use jQuery UI Tooltipand make sure that the tooltip is closed on any touch in the page as follows:
您可以使用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);
}
});
};
回答by Allen Xia
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.
我曾经尝试过一个应用程序，它的工具提示是延迟加载的。例如，UI 上会显示一个名为“提交”的按钮，然后 3 秒后，“提交您的数据到服务器”标签显示为“提交”按钮下方的工具提示。
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.
考虑到新用户总是需要更多的时间来完成操作，我认为这是实现工具提示的好方法。高级用户不会被打扰，而新用户可以在一段时间后看到工具提示。
