IE7 loses parameters in event handler function - prototype.js

Question

I have a bunch of elements on a page with a class of "product". I want to attach an event handler to each one, so on hover a tooltip is shown. The following code is working fine in Chrome, Firefox, Safari and IE8+, but not IE7:

    function init() {
        $$('.product').each(function(elm) {
            var id = elm.id;
            var name = new Element('div', {'class': 'title'}).update(products[id].name);
            var desc = new Element('div').update(products[id].desc);
            var content = new Element('div');
            content.appendChild(name);
            content.appendChild(desc);
            elm.observe('click', function() {showTooltip(content)});
            elm.observe('mouseover', function() {showTooltip(content)});
            elm.observe('mouseout', function() {hideTooltip()});
        });
    }

    document.observe('dom:loaded', init);

In IE7 the first time I hover over each element, it works fine. But, the 2nd time I hover over the element, the "content" variable is empty. If I replace my showTooltip() function with a simple alert(content.innerHTML), it alerts the proper HTML first time, and the alert is empty every time after.

I also tried to store content as an object, and use bindAsEventListener, but I get the same result.

Anyone have any thoughts on what is causing content to not persist in IE7?

Answer 1

I would try appending "content" into the DOM instead and pass a reference to the element for the tooltip, rather than the one in code.