jquery tooltip not working afer load ajax content

Question

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 :)

you can use $('.tip).load("/pageinfo.php", { id: idp}) instead of $.post(....) — SmasherHell
– SmasherHell, Commented May 18, 2013 at 22:49
thank for replay. I changed that, but it dosen't fix my problem. — Itay Gutman
– Itay Gutman, Commented May 18, 2013 at 23:02
mmmh I gess I got it, you want to use javascript in the content loaded by your ajax request. If that is the case, then you can add javascript to your content (in pageinfo.php), the .load function will execute it. — SmasherHell
– SmasherHell, Commented May 18, 2013 at 23:50

BenMorel · Accepted Answer · 2013-12-08 21:07:29Z

1

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.

edited Dec 8, 2013 at 21:07

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered May 18, 2013 at 23:50

Joe

2,1051 gold badge18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Itay Gutman Over a year ago

joe, thank for the replay, I changed the line likeyou saied but now its just not working. (I use Jquery 1.9.1)

Itay Gutman Over a year ago

now I see that i get this error console: Uncaught "ReferenceError: hover is not defined"

Joe Over a year ago

sorry it slipped my mind you will want to replace hover with "mouseover" i will edit the answer to reflect this

Itay Gutman Over a year ago

still not working. now i get this error: "Uncaught ReferenceError: tip is not defined ". this is how the html look like: <td style="padding-left:4px;"><a href="#" class="tip_trigger" title="40420549">text<span class="tip"></span></a> txtxtxtxt</td>

Joe Over a year ago

thanks id venture a guess that error message is a result of not having formally defined tip = $(this).find('.tip'); as a javascript variable... add var to the beginning like so var tip = $(this).find('.tip');

|

Collectives™ on Stack Overflow

jquery tooltip not working afer load ajax content

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related