Hello all -

I downloaded and used Karl Swedberg's (of www.learningjquery.com)
excellent clueTip plugin.  The scenario under which I used it led me
to identify a small issue that I believe was a design decision by Karl
but that behaved differently than I expected it to and, as such, made
me spend a couple hours figuring it out.

I was listing a bunch of products on a page for the company I work for
and, when you clicked on a picture of the product, a tooltip was to
come up listing some of its information as well as containing some
links that allowed you to edit some of the content in there.  So in
the tooltip, which was local and sticky, there were some links with
onclick events that manipulated some of the DOM elements in that same
tooltip.  The onclick events were firing, and the DOM appeared to be
affected when I logged the objects using firebug's console.log API,
but no difference appeared on the screen.

After some frustration, thinking my JavaScript was the culprit, I
noticed that if I clicked a part of the tooltip that incited a change,
closed the tooltip, then clicked the picture of the product again, the
tooltip that came up on that second click would show the DOM
differences.  Upon further investigation and the suggestion of my
coworker, I searched in the source code and noticed that when a
tooltip is opened and has local content, that element is cloned
using .clone(true), which meant that when I selected the tooltip using
'#tooltip_id', it was actually selected the original, not the cloned
one.  I tried passing through a reference to the cloned element using
the 'this' keyword in the onclick attribute, which worked but failed
to redraw the dropshadows on the tooltip for some reason.

For this reason I edited the source code to read
[code]
var localCluetip = $.fn.wrapInner ? $localContent.wrapInner('<div></
div>').children() : $localContent.html();
[/code]
rather than the original
[code]
var localCluetip = $.fn.wrapInner ? $localContent.wrapInner('<div></
div>').children().clone(true) : $localContent.html();
[/code]

Many thanks to Karl for this plugin, which I will continue to use.

Reply via email to