2

ちょっとした質問がありますが、同じ問題を抱えている人が 1 人しかいないことに気付きました (ただし、解決策はありません)。Zurb's Foundation を使用してレスポンシブ Web サイトを作成しています。Foundation にはいくつかの便利なツールが付属しており、そのうちの 1 つがツールチップです。

Web サイトでは、ツールチップを使用して、クリックしたときにアイコンが何をするかをユーザーに伝えています。でも！ツールチップは mouseenter で表示されます。モバイル デバイスには実際の mouseenter イベントがなく、これが問題の原因です。たとえば、ユーザーがフィルター ボタンをクリックすると、ボタンの機能は提供されず、代わりにツールチップが表示されます。

これまでのところ、実際の問題ではありません。通常、hover/mouseenter アクションでは 2 回クリックするだけですが、2 回クリックしても問題は解決しません。

簡単な質問ですが、has-tooltip 機能を無効にする方法はありますか? これを入力していると、解決策を見つけたと思います..だから、助けは必要ないかもしれません..しかし。現在または将来この問題を抱えているのは私だけではないはずなので、質問してみるのもいいかもしれません!

助けてくれてありがとう。独自の解決策を見つけたら、以下にコメントします! :)

4

4 に答える 4

3

touchプロパティに応じて、ツールチップ関数の呼び出しを制限できます。

if($("html").hasClass("no-touch")) {
    $(document).foundationTooltips();
}
于 2013-02-11T10:23:23.717 に答える
2

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>';
  }
}
于 2013-08-28T08:17:21.283 に答える
0

Foundation 5.1.0 で動作する唯一のものは次のとおりです。

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

于 2014-05-16T13:37:33.457 に答える