Advanced Search

Return to Snippet

Revision: 27380
at June 4, 2010 08:19 by cfleschhut
Initial Code 
var bubbles = $$("div.bubble");
var pages = $$("div.page");
$("bubbleWrap").setStyle("visibility", "visible");
bubbles.setStyle("opacity", 0);

pages.each(function(el, i) {
    el.set("morph", { link: "cancel" });
    el.addEvents({
        mouseenter: function() {
            bubbles[i].morph({
                opacity: 1,
                marginTop: "-15px"
            });
        },
        mouseleave: function() {
            bubbles[i].morph({
                opacity: 0,
                marginTop: 0
            });
        }
    });
});
Initial URL 
http://jsfiddle.net/qz8Ad/
Initial Description 
based on [http://net.tutsplus.com/tutorials/javascript-ajax/create-a-simple-powerful-product-highlighter-with-mootools/](http://net.tutsplus.com/tutorials/javascript-ajax/create-a-simple-powerful-product-highlighter-with-mootools/)
Initial Title 
MooTools Product Highlighter Tooltip
Initial Tags 
javascript
Initial Language 
JavaScript