jQuery Tooltip plugin error

Question

i have written this code to apply 'jQuery Tooltip plugin' to ajax loaded elements.

i mean the row i want to show tooltip on its mouseover is loaded into page by ajax. here's the code:

$("[id^=pane]").delegate("[id^=comm]","mouseover",function() {

   $(this).tooltip({

      // each trashcan image works as a trigger
      tip: "#tooltip",
      // custom positioning
      position: "center right",
      // move tooltip a little bit to the right
      offset: [0, 15],
      // there is no delay when the mouse is moved away from the trigger
      delay: 0
  }).dynamic({ bottom: { direction: "down", bounce: true } });

});

the tooltip is shown when mouseover but firebug report this error:

"$(this).tooltip({tip: "#tooltip", position: "center right", offset: [0, 15], delay: 0}).dynamic is not a function"

is it because of using $(this) ???

lonesomeday · Accepted Answer · 2011-01-15 08:44:24Z

2

The problem is that you haven't loaded the dynamic function. From the jQuery tools documentation:

the dynamic plugin and the slide effect are not included in the standard jQuery Tools distribution. You must download a custom combination to include those effects.

Furthermore, you don't need your delegate call. You are redoing the tooltip creation on every mouseover. You only need to do it once; the plugin will handle the events internally.

$("[id^=pane] [id^=comm]").tooltip({/*...*/})
       .dynamic({/*...*/});

This selects all elements with ids beginning comm that are children of elements with ids beginning pane. Note that adding appropriate classes to all these elements would speed up your selection significantly.

answered Jan 15, 2011 at 8:44

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

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

2 Comments

hd. Over a year ago

thank you,but dynamic is included in my jquery tools file.i select it in addition to tooltip from its site. and i use delegate because i add my elements with ajax .

lonesomeday Over a year ago

delegate isn't a catch-all solution for when you add elements dynamically. Every time you mouseover an element, you are calling the tooltip function, which is bound to be computationally expensive. Second, it's pretty hard to debug a problem by guesswork. If you could provide a (non-)working example of your code, that would make things 16.34 times easier.

hd. · Accepted Answer · 2011-01-16 06:12:16Z

0

it is solved now,i searched more in google and found the solution.

here it is:

$("[id^=pane]").delegate("[id^=comm]:not(.hastooltip)","mouseover",function() {
    $(this).addClass("hastooltip").tooltip({
        tip: "#tooltip",
        position: "bottom center",
        offset: [-10, 0],
        delay: 0
    }).dynamic({ bottom: { direction: "down", bounce: true } }).mouseover();
});

answered Jan 16, 2011 at 6:12

hd.

18.4k46 gold badges119 silver badges173 bronze badges

Collectives™ on Stack Overflow

jQuery Tooltip plugin error

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related