1

iphone / ipad / ipodが検出された場合、次のコードを実行しています。

$('.tooltip-trigger').tooltip({offset: [20, -110],relative:true, events: { def: 'touchstart,blur'} });

def：'touchstart'を宣言することで、ホバーではなく最初のタッチが機能するようになりましたが、ボックスが閉じず、def：'touchstart、touchstart'のような別のタッチスタートを呼び出すことができません。def：'toggle'も、私には論理的に思えます。

何か案は？

4

6 に答える 6

3

私も同じことをしました。方法は次のとおりです。

var isiPad = navigator.userAgent.match(/iPad/i) != null;

私のツールチップ関数は次のようになります。

$(function() {
    $(document).tooltip({
        items: "[data-fn]",
          content: function() {
              var element = $( this );
              if ( element.is( "[data-fn]" ) ) {
              var s = element.attr('data-fn');
              var fn = /* some text content */

              if (isiPad) fn += "<div align=right'><a href='#' class='ipadTooltipHack'>close</a></div>";
              return fn;
              } 
          }     
       });
});

最後に私はこれを追加しました：

$('.ipadTooltipHack').tooltip('close');

動作しているようです。

ツールチップ関数にhide：オプションを追加して、10秒後に自動非表示にしようとしましたが、別のツールチップが開くまで、そのツールチップを再度開くことはできませんでした。

于 2013-06-25T17:37:29.703 に答える
1

スマートフォンとタブレットのツールチップにのみ閉じるボタンを配置することで、これを解決しました

于 2012-06-19T12:47:25.970 に答える
1

Bill Nobesとnlsbshtrによるソリューションを複製できませんでした。「閉じる」リンクを押すと、ページの上部にも移動しました。少し簡単な解決策に変更しました。

これは、jQueryとModernizr.touch関数に基づいており、タッチデバイスを使用しているかどうかを検出します。標準のタイトルタグを使用し、クリック時に推奨される閉じる方法を使用して、開いたツールチップを閉じます。

$(function() {
    $( '.tooltip-trigger' ).tooltip(
    {
        content: function() {
            var element = $( this );
            var s = element.attr('title');
            if ('' == s)
                return null;
            if (Modernizr.touch) // using Modernizr to detect touch devices.
                s += "&lt;div align=right'>&lt;a href=\"javascript:$('.tooltip-trigger').tooltip('close');\" class='touchTooltipHack'>close&lt;/a>&lt;/div>";
            return s;
        } 
    });
});

.tooltip-trigger選択したクラスに置き換え ます。

于 2013-11-05T15:45:41.403 に答える
0

user2956826の回答は、ここでjqueryuiの推奨事項に従います-これは次のとおりです：-

Safari Mobile 7.0以降（およびおそらく以前のバージョンも）には、通常はインタラクティブではない要素に対してクリックイベントが発生しないというバグがあります。

...詳細はこちら

ただし、含まれているHTMLの特殊文字はブラウザに文字通り表示されているようで、二重引用符で囲んだ同等のHTML以外の文字に置き換える必要がありました。また、（自明に）align = rightの周りの同じ行に単一引用符が欠落しているので、たとえば、

 s += "<div align='right'><a href=\"javascript:$('.tooltip-trigger').tooltip('close');\" class='touchTooltipHack'>close</a></div>";
于 2015-04-09T21:22:46.290 に答える
0

私にとって、これは機能します：

cssを追加します：

.ui-tooltip{cursor:pointer;}

jqueryを追加します： 

$('body').on('click','.ui-tooltip', function(){
   $(this).hide();
});

その後、iPadでも、ツールチップをクリックするとツールチップが閉じます。

于 2017-11-18T09:07:15.207 に答える
0

同じ問題で実行されましたが、もう1つの要件がありました。複数のツールチップがあるため、新しいツールチップを開いている間、少なくとも開いているツールチップを閉じる必要があります。この簡単な実装で来て、多分誰かを助けるでしょう

var $tooltipCaller = $('.tooltip');

  $tooltipCaller.tooltip({
    open: function (e, ui) {
      $tooltipCaller.not(this).tooltip('close');
    }
  });
于 2017-12-14T00:56:13.133 に答える