From ca3ad6305ec0655ad8475a12ac2228b61cdd9ba0 Mon Sep 17 00:00:00 2001 From: Lionel LASKE Date: Sat, 25 Aug 2012 20:23:36 +0000 Subject: Init commit --- (limited to 'html/lib/onyx/source/Tooltip.js') diff --git a/html/lib/onyx/source/Tooltip.js b/html/lib/onyx/source/Tooltip.js new file mode 100644 index 0000000..9cbe4e4 --- /dev/null +++ b/html/lib/onyx/source/Tooltip.js @@ -0,0 +1,80 @@ +/** + _onyx.Tooltip_ is a kind of onyx.Popup that works + with an onyx.TooltipDecorator. It + automatically displays a tooltip when the user hovers over the decorator. + The tooltip is positioned around the decorator where there is available + window space. + + {kind: "onyx.TooltipDecorator", components: [ + {kind: "onyx.Button", content: "Tooltip"}, + {kind: "onyx.Tooltip", content: "I'm a tooltip for a button."} + ]} + + You may manually display the tooltip by calling its _show_ method. +*/ +enyo.kind({ + name: "onyx.Tooltip", + kind: "onyx.Popup", + classes: "onyx-tooltip below left-arrow", + autoDismiss: false, + showDelay: 500, + defaultLeft: -6, //default margin-left value + handlers: { + onRequestShowTooltip: "requestShow", + onRequestHideTooltip: "requestHide" + }, + requestShow: function() { + this.showJob = setTimeout(enyo.bind(this, "show"), this.showDelay); + return true; + }, + cancelShow: function() { + clearTimeout(this.showJob); + }, + requestHide: function() { + this.cancelShow(); + return this.inherited(arguments); + }, + showingChanged: function() { + this.cancelShow(); + this.adjustPosition(true); + this.inherited(arguments); + }, + applyPosition: function(inRect) { + var s = "" + for (n in inRect) { + s += (n + ":" + inRect[n] + (isNaN(inRect[n]) ? "; " : "px; ")); + } + this.addStyles(s); + }, + adjustPosition: function(belowActivator) { + if (this.showing && this.hasNode()) { + var b = this.node.getBoundingClientRect(); + + //when the tooltip bottom goes below the window height move it above the decorator + if (b.top + b.height > window.innerHeight) { + this.addRemoveClass("below", false); + this.addRemoveClass("above", true); + } else { + this.addRemoveClass("above", false); + this.addRemoveClass("below", true); + } + + //when the tooltip's right edge is out of the window, align it's right edge with the decorator left edge (approx) + if (b.left + b.width > window.innerWidth){ + this.applyPosition({'margin-left': -b.width, bottom: "auto"}); + //use the right-arrow + this.addRemoveClass("left-arrow", false); + this.addRemoveClass("right-arrow", true); + } + } + }, + resizeHandler: function() { + //reset the tooltip to align it's left edge with the decorator + this.applyPosition({'margin-left': this.defaultLeft, bottom: "auto"}); + this.addRemoveClass("left-arrow", true); + this.addRemoveClass("right-arrow", false); + + this.adjustPosition(true); + this.inherited(arguments); + } +}); -- cgit v0.9.1