触摸设备的jQuery工具提示

我一直在互联网上搜索，很难找到不依赖第三方插件的解决方案

我发现了一些：

• @TeaDroid的回答：
• Tooltipster插件：

但是，据我所知，它们都不支持在元素未预先加载时创建这些工具提示。因此，如果我们通过AJAX加载元素，工具提示将无法工作

---

因此，我提出了一个非常简单的解决方案——也许不是最好的，但对我来说很有用——它只依赖jQuery函数，而不依赖第三方插件。请参见下文。

我基本上是先启动工具提示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 descripeby”，这是jQuery在显示来自元素的工具提示时添加到元素中的属性（这样，我就知道工具提示是否处于活动状态）

最后，如果工具提示未激活，我将触发一个“mouseover”事件来模拟鼠标悬停的效果，如果它处于激活状态，我将触发一个“mouseleave”

我编写了这两个事件（“单击”和“触摸结束”），因为这并不重要，因为它只会在工具提示已经激活的情况下使其消失，但只需要“触摸结束”事件

希望这对某人有帮助

亲切的问候

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