触摸设备的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 “事件。

希望它有助于某人！

亲切的问候。