觸控式工具提示

Question

任何人都知道包含移動設備解決方案的Jquery工具提示？由於懸停狀態不起作用，我猜我需要的東西也適用於點擊。也許它的行爲就像一個點擊模式框？只是在這裏扔東西。不知道最好的解決方案是什麼。

- 更新 -

我真的很喜歡這個解決方案@Alveoli建議，但我最終採取刺傷它自己。我使用qTip作爲我的基礎，並寫了一些Frankenstein的代碼來創建觸控友好的工具提示和移動友好的模態框。任何幫助優化代碼將不勝感激。這裏是小提琴... http://jsfiddle.net/cssguru/NQRBT/

Answer 1

我在尋找同樣的東西，發現這個優雅的解決方案：

http://osvaldas.info/blog/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

的好處是，在移動它「粘」當你觸摸它，當你再次觸摸消失。

Answer 2

我曾嘗試一個應用程序，其工具提示是懶加載。例如，在用戶界面上顯示一個名爲「提交」的按鈕，然後3秒鐘後，「提交」按鈕下方的標籤「將數據合併到服務器」顯示爲工具提示。

考慮到新用戶總是需要更多時間來完成操作，我認爲這是一個實施工具提示的好方法。老用戶不會感到困擾，而新用戶可能會在一段時間後看到工具提示。

Answer 3

你可以使用jQuery UI Tooltip並確保如下工具提示在網頁中的任何觸摸關閉：

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