Question

Him I’m trying to add a jQuery tooltip to a dynamically generated list, the text I want to display the tooltip on is in a table, so my CSS tooltip doesn’t work:

CSS tooltip.

I tried to add this jQuery tooltip to the page, it works on my local test page, but I think the problem has something to do with uniqur ids, and I’m not sure how to implement the bind all function explained there:

“To bind all of the targets to their corresponding content, it takes only one line:

$(".tooltip-target").ezpz_tooltip();
Calling ezpz_tooltip()

on a class will bind the hover event to each element, and because of the naming convention it will know which content to display.”

Can someone help me to understand what exactly I have to do to make this work on a dynamic page?

The page is Euroworker’s checkout product page. (You’ll have to add some items to the basket, click the home button on the left of the bnav bar and click the little white button “kjøp” then the orange button “handlevogn”.)

Thanks.

Answer 1

I believe you can call jQuery(".tooltip-target").ezpz_tooltip(); every time you add a new item (assuming they will have the tooltip-target class), but I’m not sure this is completely right.

Another way to achieve what you want is using a plugin like livequery. With the plugin you’ll just need something like:

jQuery(".tooltip-target").livequery(function(){
   j(this).ezpz_tooltip();
})