觸摸設備的jQuery工具提示

Question

我一直在尋找互聯網，很難找到不依賴於第三方插件的解決方案。

我發現了幾個：

• 通過@TeaDroid答：https://stackoverflow.com/a/10570732/1047814
• Tooltipster插件：http://iamceege.github.io/tooltipster/

但他們沒有，據我已經能夠告訴，當預先加載的元素是而不是時，支持創建這些工具提示。所以，如果我們通過AJAX加載元素，工具提示將不起作用。

所以，我想出了一個非常簡單的解決方案 - 可能不是最好的，但適用於我 - 只依賴沒有第三方插件的jQuery函數。見下文。

Answer 1

我基本上做的是首先啓動的提示jQuery的功能，因爲它們在其文檔中做到：

$(document).ready(function(){ 
    $(document).tooltip({ 
     items: ".info_warning", 
     content: function() { 
       var element = $(this); 
       if (element.is(".info_warning")) { 
        return element.text() 
       } 
      }, 
      tooltipClass: "info_tooltip" 
     }) 
    }) 

正如你所看到的，我告訴它只是爲了尋找與類「info_warning」這些元素並且其內容是元素內容（這是因爲我不喜歡title屬性）。

然後，我所做的是告訴它，如果檢測到「click」或「touch」事件，請檢查屬性「aria-describedby」，這是jQuery在元素添加到元素時工具提示正在顯示（所以，這樣我知道工具提示是否激活）。

最後，如果工具提示沒有激活，我會觸發一個「鼠標懸停」事件來模擬鼠標懸停效果，如果它是活動的，我會觸發一個「mouseleave」。

$(document).on("click touchend", ".info_warning", function(){ 
    if($(this).attr("aria-describedby") === undefined) $(this).trigger("mouseover") 
    else $(this).trigger("mouseleave") 
}) 

我已經寫了兩個事件（「點擊」和「touchend」），因爲這並不重要，因爲它只會使消失的情況下，它已經被激活的提示，但它是隻需要在「touchend 「事件。

希望它有助於某人！

親切的問候。