Advanced Search

MooTools Product Highlighter Tooltip

/ Published in: JavaScript
Save to your folder(s)
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/)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. var bubbles = $$("div.bubble");
  2. var pages = $$("div.page");
  3. $("bubbleWrap").setStyle("visibility", "visible");
  4. bubbles.setStyle("opacity", 0);
  5.  
  6. pages.each(function(el, i) {
  7.     el.set("morph", { link: "cancel" });
  8.     el.addEvents({
  9.         mouseenter: function() {
  10.             bubbles[i].morph({
  11.                 opacity: 1,
  12.                 marginTop: "-15px"
  13.             });
  14.         },
  15.         mouseleave: function() {
  16.             bubbles[i].morph({
  17.                 opacity: 0,
  18.                 marginTop: 0
  19.             });
  20.         }
  21.     });
  22. });

URL: http://jsfiddle.net/qz8Ad/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.