Question

我有一个快速的小问题，我只注意到一个人有同样的问题（但没有解决方案）！我正在使用Zurb的基金会来创建一个响应式网站。 Foundation提供了一些有用的工具，其中一个是Tooltip。

在一个网站中，我正在使用工具提示告诉用户点击时图标将会执行什么操作。然而！工具提示在mouseenter上显示..因为我们都知道移动设备上没有真正的mouseenter事件，这就是出错的地方。例如，当用户点击过滤器按钮时，他/她没有使用按钮的功能，而是显示工具提示。

到目前为止，这不是一个真正的问题，通常只需点击两次鼠标悬停/鼠标中心操作，但点击两次并不能解决问题。

所以..快速的小问题是：有没有办法禁用has-tooltip功能？当我打字时，我觉得我找到了一个解决方案......所以也许没有必要帮助，但是。我不可能是现在或将来唯一遇到这个问题的人，所以提出这个问题也许是好事！

感谢您的帮助，如果我找到了自己的解决方案，我将在下面发表评论！：）

Answer 1

还有这个：

$(document).foundation('tooltip', 'off');

通过http://foundation.zurb.com/docs/javascript.html

Answer 2

您可以根据touch属性限制对工具提示功能的调用：

if($("html").hasClass("no-touch")) {
    $(document).foundationTooltips();
}

Answer 3

Foundation 4支持数据参数中触摸设备的禁用功能。

data-options="disable-for-touch: true"

示例：

<li id="print_button" class="has-tip" data-options="disable-for-touch: true" title="Print Take Five" class="none">
   <a href="">Print</a>
</li>

来源：

{
  selector : '.has-tip',
  additionalInheritableClasses : [],
  tooltipClass : '.tooltip',
  disable-for-touch: false,
  tipTemplate : function (selector, content) {
    return '<span data-selector="' + selector + '" class="'
      + Foundation.libs.tooltips.settings.tooltipClass.substring(1)
      + '">' + content + '<span class="nub"></span></span>';
  }
}

Answer 4

唯一适用于Foundation 5.1.0的是：

Foundation.libs.tooltip.settings.disable_for_touch = true;

Zurb Foundation：在移动设备上禁用has-tooltip

4 个答案: