zeroclipboard hover

Question

Hi guys, I'm trying to implement the flash component used on retailmenot.com and I'm facing some problems with it.

After several days of searching and such I succeed on doing the zeroclipboard flash element to go over my multiple coupon codes and when I click on one to open a new url with that link.

What I can't do it now, and which I tried with several jQuery methods is to display that "Copy and Open Site" box on the right side of the hovered element I'm on. It looks like a tooltip.

I tried to apply on the dom element which is under the invisible flash the method $('.class_element').hover( function (){ } display new div on the left) but since the flash is going on top, it is not triggered.

Another try I did was to modify the Zeroclipboard.js file and add an id to the absolute div that holds the flash inside, and add hover event on it, but still it was without success.

I also tried to use addEventListner('mouseover', function(){}) from the Zeroclipboard element but yet, without success.

Could you please suggest me how I could make some sort of tooltip for the flash components which are being positioned on top of the dom elements?

Thank you!

Answer 1

Flash by default is rendered in a separated window, not inside the DOM. To make the Flash go inside the DOM, add the parameter wmode to opaque. If you load flash using swfobject, the syntax will be:

so.addParam('wmode','opaque');

Also, a Flash element need to know the height and width of the container that hold it, so you cannot use .hide() and .show() when hover in and out. One of the trick that I learn from jQuery UI tabs is that put the 'hidden' element in a negative position. When needed, put it in correct position, when not needed, return it into it's negative position.