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