Question

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

我发现了一些：

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

但是，据我所知，当事先未加载元素时，它们都不支持创建这些工具提示。因此，如果我们通过AJAX加载元素，工具提示就不会起作用。

所以，我提出了一个非常简单的解决方案 - 可能不是最好的解决方案，但对我有用 - 只依赖于没有第三方插件的jQuery函数。见下文。

Answer 1

我基本上做的是首先启动tooltip 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"
        })
    })

正如你所看到的，我告诉它只查看那些带有＆＃34; info_warning＆＃34;并且它的内容是元素内容（这是因为我不想依赖title属性）。

然后，我所做的就是告诉它，如果＆＃34;点击＆＃34;或者＆＃34;触摸＆＃34;检测到事件，检查属性＆＃34; aria-describedby＆＃34;，这是jQuery在显示工具提示时添加到元素的属性（因此，这样我知道工具提示是否处于活动状态或不是）。

最后，如果工具提示未激活，我会触发＆＃34;鼠标悬停＆＃34;用鼠标模拟悬停效果的事件，如果它处于活动状态，我会触发＆＃34; mouseleave＆＃34;。

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

我已经写了这两个事件（＆＃34;点击＆＃34;＆＃34; touchend＆＃34;）因为它并不重要，因为它只会在工具提示消失的情况下消失＃39; s已经激活，但只需要＆＃34; touchend＆＃34;事件

希望对某人有帮助！

亲切的问候。

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

1 个答案: