/** * @fileoverview * When this script is included on a page, it will automatically style special tooltips and balloon callouts. * * To specify a tooltip, add a title attribute and class="autoTooltip" to any element on the page. * HTML can NOT be include in a tooltip. * * My First Tooltip * * * A balloon callout is displayed like a toolip, but can have HTML in the content. * * more info *

- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Ut wisi enim ad minim veniam.
- Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

* * Notice that the anchor's url is the callout div's ID. * The class names and markup for balloonControl, balloonCallout and body are very important. * * @requires YAHOO.widget.Tooltip, YAHOO.util.Dom, YAHOO.util.Event */ PAYPAL.namespace("widget"); /** * Automatically go through the anchors on the page to add a * stylized look to the tooltips and balloon callouts. */ PAYPAL.widget.Balloons = { pageLoaded : false, /** * Initializes object and anchors on the page */ init : function(){ //Overwrites widget CSS classes for the container YAHOO.widget.Module.CSS_HEADER = "header"; YAHOO.widget.Module.CSS_BODY = "body"; YAHOO.widget.Module.CSS_FOOTER = "footer"; // Tooltips var tt = []; var elems = YAHOO.util.Dom.getElementsByClassName("autoTooltip", null, document); for(var i = 0; i < elems.length; i++){ tt[i] = new YAHOO.widget.Tooltip("autoTooltip"+ i, { context: elems[i], preventoverlap: true, showdelay: 0, autodismissdelay: 10 * 1000, effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} }); tt[i].align(YAHOO.widget.Overlay.BOTTOM_LEFT, YAHOO.widget.Overlay.TOP_LEFT); tt[i].beforeShowEvent.subscribe(PAYPAL.widget.Balloons.adjustPosition, { context: elems[i], tooltip: tt[i] }); tt[i].showEvent.subscribe(PAYPAL.widget.Balloons.fixIframeShim, { context: elems[i], tooltip: tt[i] }); elems[i]._balloon = tt[i]; } // Balloon Callouts var id, anchors, elem, body, inner; var callout = []; anchors = YAHOO.util.Dom.getElementsByClassName("balloonControl", "a", document); for(var i = 0; i < anchors.length; i++){ id = anchors[i].href; if(id.indexOf("#") > -1){ id = id.split("#")[1]; elem = document.getElementById(id); if(elem){ // Extract div content and remove "body" div if it exists body = elem.innerHTML; inner = YAHOO.util.Dom.getElementsBy( function(node){ return (YAHOO.util.Dom.hasClass(node, "body") && node.parentNode == elem); }, "div", elem); // Remove inner 'body' if(inner.length == 1){ body = inner[0].innerHTML; } elem.innerHTML = ""; // Create balloon markup callout[i] = new YAHOO.widget.Tooltip(elem, { context: anchors[i], preventoverlap: true, showdelay: 0, autodismissdelay: 10 * 1000, effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} }); callout[i].setBody(body); callout[i].align(YAHOO.widget.Overlay.BOTTOM_LEFT, YAHOO.widget.Overlay.TOP_LEFT); callout[i].beforeShowEvent.subscribe(PAYPAL.widget.Balloons.adjustPosition, { context: anchors[i], tooltip: callout[i] }); anchors[i]._balloon = callout[i]; } } } }, /** * Sets the position static to the context element and * adds the ttPosOver/ttPosUnder class to the tooltip * @param {String} type The custom event type 'onShow' * @param {Array} args Custom event fire args * @param {Object} elems An object containing the tooltip and * context (anchor, span, etc) objects */ adjustPosition : function(type, args, elems){ var tt = elems.tooltip.element; var context = elems.context; // Remove accessAid YAHOO.util.Dom.removeClass(tt, "accessAid"); // Intersects the primary navigation var navRegion, ttRegion; var nav = document.getElementById("navPrimary"); if(nav){ navRegion = YAHOO.util.Region.getRegion(nav); ttRegion = YAHOO.util.Region.getRegion(elems.tooltip.element); if((ttRegion.top <= navRegion.top - nav.clientHeight)){ YAHOO.util.Dom.setY(tt, YAHOO.util.Dom.getY(tt) + context.offsetHeight + tt.offsetHeight); } } // Tooltip is above the context element if(YAHOO.util.Dom.getY(tt) < YAHOO.util.Dom.getY(context)){ YAHOO.util.Dom.addClass(tt, "ttPosOver"); YAHOO.util.Dom.removeClass(tt, "ttPosUnder"); YAHOO.util.Dom.setY(tt, YAHOO.util.Dom.getY(context) - tt.offsetHeight); } // Tooltip is under the context element else{ YAHOO.util.Dom.addClass(tt, "ttPosUnder"); YAHOO.util.Dom.removeClass(tt, "ttPosOver"); YAHOO.util.Dom.setY(tt, YAHOO.util.Dom.getY(context) + context.offsetHeight + 5); } // Set static position relative to context YAHOO.util.Dom.setX(tt, YAHOO.util.Dom.getX(context) - 10); }, fixIframeShim : function(type, args, elems) { if (elems.tooltip.iframe) { YAHOO.util.Dom.setXY(elems.tooltip.iframe, YAHOO.util.Dom.getXY(elems.tooltip.element)); } }, /** * Hide balloon callout boxes. * This is done here to support JS and non-JS browsers */ jsEnabled : function(){ YAHOO.util.Event.addListener(window, "load", function(){ PAYPAL.widget.Balloons.pageLoaded = true }); var i = 0; var hideInterval; function hideCallouts(){ if(i > 0 && PAYPAL.widget.Balloons.pageLoaded){ clearInterval(hideInterval); return false; } // Get balloon callouts YAHOO.util.Dom.getElementsBy(function(elem){ // Add accessAid class if(YAHOO.util.Dom.hasClass(elem, "balloonCallout") && !YAHOO.util.Dom.hasClass(elem, "accessAid")){ YAHOO.util.Dom.addClass(elem, "accessAid"); } return false; }); i++; } // Hide callouts as they load hideInterval = setInterval(hideCallouts, 50); } } PAYPAL.widget.Balloons.jsEnabled(); YAHOO.util.Event.addListener(window, "load", PAYPAL.widget.Balloons.init);