用iPhone/iPad關閉jQuery的工具提示使用touchstart

如果檢測到iPhone/iPad的/ iPod的我已經被運行下面的代碼：用iPhone/iPad關閉jQuery的工具提示使用touchstart

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

我已經得到了初步接觸，而不是工作的懸停通過聲明def：'touchstart'，但是盒子不會關閉並調用另一個像def這樣的touchstart：'touchstart，touchstart'不起作用。 def也沒有：'切換'這對我來說似乎合乎邏輯。

任何想法？

來源

2012-06-11 Friendly Code

我通過放置工具提示的智能手機和平板電腦僅

來源

2012-06-19 12:47:25

我做同樣的事情關閉按鈕解決了這個。具體方法如下：

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

似乎工作。

我試圖在tooltip函數中添加一個hide：選項，以便在10s後自動隱藏，但之後您無法再打開該工具提示，直到打開另一個工具提示。

來源

2013-06-25 17:37:29

我無法通過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-05 15:45:41 user2956826

user2956826答案如下jQueryUI的建議here - 這是： - 從一個bug

的Safari移動7.0+（可能更早版本太）遭受這裏單擊事件不會對不屬於元素解僱通常是交互

...詳細here

然而，HTML特殊字符包含的似乎是在瀏覽器中顯示的字面上，我需要ŧ o用雙引號內的非html等價物替換它們。在align = right的同一行中也有（簡單地）缺少單引號，所以我有例如。

s += "<div align='right'><a href=\"javascript:$('.tooltip-trigger').tooltip('close');\" class='touchTooltipHack'>close</a></div>";

來源

2015-04-09 21:22:46

對於我來說，這個工程：

新增CSS：

.ui-tooltip{cursor:pointer;}

添加的jQuery：

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

之後，提示將關閉，當你點擊它，甚至在iPad上。

來源

2017-11-18 09:07:15 user3759454

好，只是跑了同樣的問題，但有更多的一個要求 - 因爲我有多個提示我需要至少在一個新打開關閉打開的提示。這個簡單的實現來了，也許會幫助別人走出

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

    $tooltipCaller.tooltip({ 
    open: function (e, ui) { 
     $tooltipCaller.not(this).tooltip('close'); 
    } 
    });

來源

2017-12-14 00:56:13 lesgrosman

用iPhone/iPad關閉jQuery的工具提示使用touchstart

回答

相關問題