Geek Answers Handbook

Bootstrap tooltips with AJAX (one more time)

Mundane, a common use case

I would like the tooltip to display the loaded GIF immediately on mouseover, which is replaced by HTML as a result of the AJAX success callback. There are almost as many broken answers to AJAX tips as people asking this exact question online. In particular, I motivated my efforts on this , this , and especially a few answers here .

The problem that I constantly encounter in all these solutions, even those who specifically require a solution to this problem, is that tool tips sometimes appear late and do not disappear. This is not a library issue either, because I had the same problem in the past with jQuery-UI tool tips.

Libraries

  • jQuery v2.2.3
  • Bootstrap v3.3.6

They used to try using jQuery 1 and had the same problem:

  • jQuery v1.12.3

My page also relies on the jQuery Datatables v1.10.11 library, but this is orthogonal to the hint problem, different from the fact that my particular use case generates more and more AJAX tooltip requests with variable delays, which increases the likelihood of seeing "sticking problems "

Current attempt

"towr" , . , , , "" .

, 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 , , . , if( <hover-check> ) , , 10 , - , .

The Crux

, , , , ?

, , .

1) .tooltip() undefined, jQuery JS <head>, Bootstrap JS include HTML. Bootstrap, jQuery ( jQuery Bootstrap), .

2) , , $el.data(...) undefined $el.data('tooltip').tip().is(':visible') . , .

, , , 16 (, , 16) , , , , , .

+4
1

, .

, , $el.data('tooltip').tip().is(':visible'), $el.data(...) undefined, , .

Bootstrap v3.3.6 , ", " , . $( "#" + $el.attr( "aria-describedby" ) ).is( ":visible" )

, , , , "stick" -.

$( ".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" );
                }
        }
        );
0

More articles:


All Articles