CODEWITHSUNDEEP
phpjquerycsstooltip
Itay Gutman
Itay Gutman

Reputation: 7

jquery tooltip not working afer load ajax content

I use this tooltip script that showen here: http://www.htmldrive.net/items/show/681/jQuery-and-CSS3-Simple-Tooltip.html

this is what I use, same with few changes:

$(document).ready(function() {

        $("body").on("mouseover", ".tip_trigger", function(){
            tip = $(this).find('.tip');
            $(".tip").html('Loding...');
            tip.show(); //Show tooltip
        }, function() {
            tip.hide(); //Hide tooltip

        }).mousemove(function(e) {
            var mousex = e.pageX; //Get X coodrinates
            var mousey = e.pageY; //Get Y coordinates
            var tipWidth = tip.width(); //Find width of tooltip
            var tipHeight = tip.height(); //Find height of tooltip


        var X = $('.tip_trigger').offset().left;
        var Y = $('.tip_trigger').offset().top;
        mousex = e.pageX - X+180;
        mousey = e.pageY - Y+105;


            tip.css({  top: mousey, left: mousex });
            $(".tip").html('Loding...');
            var idp= this.title;

             $('.tip').load("/infopage.php", { id: idp});


        });

});

the html with the tip is somthing like this:

<td style="padding-left:4px;"><a href="#" class="tip_trigger" title="40420549">text<span class="tip"></span></a> txtxtxtxt</td>

It's work great, But the problem is that after I load some php content with ajax the script don't work on the content that came from there.

why that happen? If there is anther way to load php content to tooltip It will be good too :)

Upvotes: 0

Views: 1362

Answers (1)

Joe
Joe

Reputation: 2105

EDIT: was able to get the live "on" functionality working by breaking your jQuery up into three elements. an "ON mouseover" "ON mousemove" and "ON mouseout" - because the on function does not support multiple definitions for hover... also had to add a tip variable declaration to each function for this to work:

var tip = $(this).find('.tip');

$(document).ready(function() {

    $("body").on("mouseover", ".tip_trigger", function(){
        var tip = $(this).find('.tip');
        $(".tip").html('Loding...');
        tip.show(); //Show tooltip
    });


    $("body").on("mouseout", ".tip_trigger", function(){
        var tip = $(this).find('.tip');
        tip.hide(); //Hide tooltip
    });


    $("body").on("mousemove", ".tip_trigger", function(e){
        var tip = $(this).find('.tip');
        var mousex = e.pageX; //Get X coodrinates
        var mousey = e.pageY; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip


        var X = $('.tip_trigger').offset().left;
        var Y = $('.tip_trigger').offset().top;
        mousex = e.pageX - X+180;
        mousey = e.pageY - Y+105;


        tip.css({  top: mousey, left: mousex });
        $(".tip").html('Loading...');
        var idp= this.title;

         $('.tip').load("infopage.php", { id: idp});

    });

});

This setup should get you a few steps further along - but without your PHP being called by ajax I am at an impass - hope this helps

What is happening here is an issue with the new content generated by your ajax call, that new content has not been instantiated with your jQuery functions:

$(".tip_trigger").hover(function(){ ...

To fix this issue you want to convert that jQuery .hover trigger to either of the .on() or .live() functions [depending on your version of jQuery .live is the older deprecated function similar to .on(). if you are utilizing any recent jQuery version, you should try .on() first]

Something like this will fix that issue:

$("body").on("mouseover", ".tip_trigger", function(){ ...

What this translates to is roughly:

within the body of the page - on the hover event of all elements ".tip_trigger" [ regardless of when they are generated be it with ajax or on document ready] - call said function ...

An important thing to note is that using "body" is a poor practice, you will want to replace that "body" selector with the most specific element that exists in your document at the time of calling this jQuery and that also contains the ".tip_trigger" objects you create with ajax. the more specific you can be here will increase performance.

Upvotes: 1

Related Questions