用于触摸设备的 jQuery 工具提示

Question

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

我找到了一些：

• @TeaDroid 回复：https://stackoverflow.com/a/10570732/1047814
• 工具提示插件：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 属性）。

然后，我要做的是告诉它，如果检测到“点击”或“触摸”事件，请检查属性“aria- describeby”，这是 jQuery 在工具提示时添加到元素的属性从中显示出来（所以，这样我就知道工具提示是否处于活动状态）。

最后，如果tooltip没有激活，我触发一个“mouseover”事件来模拟鼠标的悬停效果，如果它激活了，我触发一个“mouseleave”。

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

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

希望对某人有所帮助！

亲切的问候。