jQuery Tooltip plugin error

2019-06-13 15:36发布

问题:

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

回答1:

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.



回答2:

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();
});