javascript – 使用AJAX启动工具提示(再一次)

Mundane,常见用例

我想要一个工具提示,它在鼠标悬停时立即显示加载GIF,该替换为由AJAX成功回调产生的HTML.对于AJAX工具提示,几乎有很多破碎的答案,就像人们在网上提出这个问题一样.特别是,我一直在为this,this,特别是几个答案here建模.

我一直遇到的所有这些解决方案的问题,即使是那些特别声称要解决这个问题的解决方案,是工具提示偶尔出现得很晚而且不会消失.这也不是一个库问题,因为我在过去使用jQuery-UI工具提示时遇到了同样的问题.

图书馆

> jQuery v2.2.3
> Bootstrap v3.3.6

以前尝试过使用jQuery 1并遇到同样的问题：

> jQuery v1.12.3

我的页面也依赖于jQuery Datatables v1.10.11库,但这与工具提示问题是正交的,除了我的特定用例生成更多更快的具有可变延迟的AJAX工具提示请求这一事实,这增加了观察“坚持”的问题.

目前的尝试

我目前的解决方案大致基于’towr’here的答案,非常接近工作.我已经尝试了在页面上方的每个解决方案,他们要么因为某种原因而被打破,要么出现“粘滞”工具提示问题.

因此,在AJAX请求加载数据以填充表之后,我按类$(“.tooltip-cell”).on(“mouSEOver”,set_tooltip)迭代单元格,其中set_tooltip是执行以下操作的函数

var $e = $(this);
if( $e.attr( "title" ) === undefined ) { // request data once per cell
    // show loading GIF
    $e.attr( "title","<img src='images/wait.gif'/>" );
    $e.tooltip(
        {
            html: true,trigger: "hover"
        }
        ).tooltip( "show" );
    // perform AJAX GET
    $.ajax(
            {
                url: "ajax/tooltip_data.PHP",data:
                        {
                            lookup_id: $e.attr("lookup_id")
                        },success:
                        function(response) {
                            // prepare final version of tooltip
                            $e.attr( "title",response ).tooltip( "fixTitle" );
                            // if mouse still hovers,display final version
                            if( $e.is( ":hover" ) ) {
                                $e.tooltip( "show" );
                            }
                        },dataType: "html"
            }
            );
}

这里的问题是AJAX成功回调中的悬停检测.现在显然.is(“：hover”)已经被弃用了很长一段时间,所以我尝试了各种替代方法,例如$(“：focus：active”)..filter($e).length> 0,但结果总是显示所有工具提示并且显示粘贴或没有工具提示.通过引入setTimeout(function(){},2000)可以很容易地重现这一点.将代码包装在回调中.然后问题总是发生.事实上,我可以创建10个相邻的工具提示,在它们之间运行鼠标,2秒后,它们都将以AJAX HTML和棒状显示,尽管鼠标没有悬停在其中任何一个上.使用print语句和调试,我可以验证if(< hover-check>)中的值是否正确,反过来,10个元素中的每一个,所以不知何故,悬停检查本身不正确或返回陈旧信息.

紧要关头

如何在与该元素对应的回调准备好工具提示内容时,如何准确确定鼠标当前是否位于元素顶部？

其他想法

我在处理这个问题时遇到了两个复杂的问题,但我认为它们并不相关.

1)我得到一个错误,.tooltip()是未定义的,除非我的jQuery JS包含在< head>中我的Bootstrap JS包含在我的HTML主体的底部.如果我向上移动Bootstrap或向下移动jQuery(始终将jQuery保持在Bootstrap之上),我就会收到错误.

2)解决方案here看起来不错,但无论我如何仔细地复制代码,我都会为$el.data(‘tooltip’).tip()获取$el.data(…)未定义的错误.在我的代码中是(‘：visible’).尽管链接的演示页面本身对我来说很好.

希望将军

我希望这个问题可以成为想要这样做的人的规范资源,因为我昨天花了16个小时(是的,真的是16个小时)来处理这个问题,实现我能想到的每个我能找到的解决方案.

解决方法

核心理念

对我来说,关键是在here提供的解决方案中,我在原始问题中将其链接起来.

源代码中出现的这个解决方案的问题是使用$el.data(‘tooltip’).tip().is(‘：visible’)总是导致错误$el.data(… )undefined,但检查工具提示的显示状态而不是鼠标的悬停状态的想法似乎很有希望.

仔细检查Bootstrap v3.3.6工具提示操作后发现,它将悬停元素上的’aria-describedby’设置为工具提示的元素ID.有了这些信息,我们可以做$(“#”$el.attr(“aria-describedby”)).is(“：visible”)

我不知道这将来会有多大的证据,但它最终会“坚持”.

码

$( ".ajax-tooltip-required" ).tooltip(
        {
            html: true,trigger: "manual"
        }
        ).on(
        {
            mouseenter:
                function() {
                    var $el = $(this);
                    if( $el.data( "fetched" ) === undefined ) {
                        $el.data( "fetched",true );
                        $el.attr( "data-original-title","<img src='images/wait.gif'/>" ).tooltip( "show" );
                        $.ajax(
                            {
                                url: "ajax/tooltip_data.PHP",data:                                   {
                                        lookup_id: $el.attr("lookup_id")
                                    },success:
                                    function( response ) {
                                        $el.attr( "data-original-title",response );
                                        if( $( "#" + $el.attr( "aria-describedby" ) ).is( ":visible" ) ) {
                                            $el.tooltip( "show" );
                                        }
                                    },dataType: "html"
                            }
                            );
                    } else {
                        $(this).tooltip( "show" );
                    }
                },mouseleave:
                function() {
                    $(this).tooltip( "hide" );
                }
        }
        );

javascript – 使用AJAX启动工具提示(再一次)

解决方法

相关推荐