123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266 |
- if (!dojo._hasResource["dijit.Tooltip"]) { // _hasResource checks added by
- // build. Do not use _hasResource
- // directly in your code.
- dojo._hasResource["dijit.Tooltip"] = true;
- dojo.provide("dijit.Tooltip");
- dojo.require("dijit._Widget");
- dojo.require("dijit._Templated");
- dojo.declare("dijit._MasterTooltip", [dijit._Widget, dijit._Templated], {
- // summary
- // Internal widget that holds the actual tooltip markup,
- // which occurs once per page.
- // Called by Tooltip widgets which are just containers to hold
- // the markup
- // duration: Integer
- // Milliseconds to fade in/fade out
- duration : 200,
- templateString : "<div class=\"dijitTooltip dijitTooltipLeft\" id=\"dojoTooltip\">\n\t<div class=\"dijitTooltipContainer dijitTooltipContents\" dojoAttachPoint=\"containerNode\" waiRole='alert'></div>\n\t<div class=\"dijitTooltipConnector\"></div>\n</div>\n",
- postCreate : function() {
- dojo.body().appendChild(this.domNode);
- this.bgIframe = new dijit.BackgroundIframe(this.domNode);
- // Setup fade-in and fade-out functions.
- this.fadeIn = dojo.fadeIn({
- node : this.domNode,
- duration : this.duration,
- onEnd : dojo.hitch(this, "_onShow")
- });
- this.fadeOut = dojo.fadeOut({
- node : this.domNode,
- duration : this.duration,
- onEnd : dojo.hitch(this, "_onHide")
- });
- },
- show : function(/* String */innerHTML, /* DomNode */aroundNode) {
- // summary:
- // Display tooltip w/specified contents to right specified node
- // (To left if there's no space on the right, or if LTR==right)
- if (this.aroundNode && this.aroundNode === aroundNode) {
- return;
- }
- if (this.fadeOut.status() == "playing") {
- // previous tooltip is being hidden; wait until the hide
- // completes then show new one
- this._onDeck = arguments;
- return;
- }
- this.containerNode.innerHTML = innerHTML;
- // Firefox bug. when innerHTML changes to be shorter than previous
- // one, the node size will not be updated until it moves.
- this.domNode.style.top = (this.domNode.offsetTop + 1) + "px";
- // position the element and change CSS according to position
- var align = this.isLeftToRight() ? {
- 'BR' : 'BL',
- 'BL' : 'BR'
- } : {
- 'BL' : 'BR',
- 'BR' : 'BL'
- };
- var pos = dijit.placeOnScreenAroundElement(this.domNode,
- aroundNode, align);
- this.domNode.className = "dijitTooltip dijitTooltip"
- + (pos.corner == 'BL' ? "Right" : "Left");// FIXME: might
- // overwrite
- // class
- // show it
- dojo.style(this.domNode, "opacity", 0);
- this.fadeIn.play();
- this.isShowingNow = true;
- this.aroundNode = aroundNode;
- },
- _onShow : function() {
- if (dojo.isIE) {
- // the arrow won't show up on a node w/an opacity filter
- this.domNode.style.filter = "";
- }
- },
- hide : function(aroundNode) {
- // summary: hide the tooltip
- if (!this.aroundNode || this.aroundNode !== aroundNode) {
- return;
- }
- if (this._onDeck) {
- // this hide request is for a show() that hasn't even started
- // yet;
- // just cancel the pending show()
- this._onDeck = null;
- return;
- }
- this.fadeIn.stop();
- this.isShowingNow = false;
- this.aroundNode = null;
- this.fadeOut.play();
- },
- _onHide : function() {
- this.domNode.style.cssText = ""; // to position offscreen again
- if (this._onDeck) {
- // a show request has been queued up; do it now
- this.show.apply(this, this._onDeck);
- this._onDeck = null;
- }
- }
- });
- dijit.showTooltip = function(/* String */innerHTML, /* DomNode */aroundNode) {
- // summary:
- // Display tooltip w/specified contents to right specified node
- // (To left if there's no space on the right, or if LTR==right)
- if (!dijit._masterTT) {
- dijit._masterTT = new dijit._MasterTooltip();
- }
- return dijit._masterTT.show(innerHTML, aroundNode);
- };
- dijit.hideTooltip = function(aroundNode) {
- // summary: hide the tooltip
- if (!dijit._masterTT) {
- dijit._masterTT = new dijit._MasterTooltip();
- }
- return dijit._masterTT.hide(aroundNode);
- };
- dojo.declare("dijit.Tooltip", dijit._Widget, {
- // summary
- // Pops up a tooltip (a help message) when you hover over a
- // node.
- // label: String
- // Text to display in the tooltip.
- // Specified as innerHTML when creating the widget from markup.
- label : "",
- // showDelay: Integer
- // Number of milliseconds to wait after hovering over/focusing
- // on the object, before
- // the tooltip is displayed.
- showDelay : 400,
- // connectId: String[]
- // Id(s) of domNodes to attach the tooltip to.
- // When user hovers over any of the specified dom nodes, the
- // tooltip will appear.
- connectId : [],
- postCreate : function() {
- if (this.srcNodeRef) {
- this.srcNodeRef.style.display = "none";
- }
- this._connectNodes = [];
- dojo.forEach(this.connectId, function(id) {
- var node = dojo.byId(id);
- if (node) {
- this._connectNodes.push(node);
- dojo.forEach(["onMouseOver", "onMouseOut",
- "onFocus", "onBlur",
- "onHover", "onUnHover"],
- function(event) {
- this.connect(node, event
- .toLowerCase(),
- "_" + event);
- }, this);
- if (dojo.isIE) {
- // BiDi workaround
- node.style.zoom = 1;
- }
- }
- }, this);
- },
- _onMouseOver : function(/* Event */e) {
- this._onHover(e);
- },
- _onMouseOut : function(/* Event */e) {
- if (dojo.isDescendant(e.relatedTarget, e.target)) {
- // false event; just moved from target to target child;
- // ignore.
- return;
- }
- this._onUnHover(e);
- },
- _onFocus : function(/* Event */e) {
- this._focus = true;
- this._onHover(e);
- },
- _onBlur : function(/* Event */e) {
- this._focus = false;
- this._onUnHover(e);
- },
- _onHover : function(/* Event */e) {
- if (!this._showTimer) {
- var target = e.target;
- this._showTimer = setTimeout(dojo.hitch(this,
- function() {
- this.open(target)
- }), this.showDelay);
- }
- },
- _onUnHover : function(/* Event */e) {
- // keep a tooltip open if the associated element has focus
- if (this._focus) {
- return;
- }
- if (this._showTimer) {
- clearTimeout(this._showTimer);
- delete this._showTimer;
- }
- this.close();
- },
- open : function(/* DomNode */target) {
- // summary: display the tooltip; usually not called
- // directly.
- target = target || this._connectNodes[0];
- if (!target) {
- return;
- }
- if (this._showTimer) {
- clearTimeout(this._showTimer);
- delete this._showTimer;
- }
- dijit.showTooltip(this.label || this.domNode.innerHTML,
- target);
- this._connectNode = target;
- },
- close : function() {
- // summary: hide the tooltip; usually not called directly.
- dijit.hideTooltip(this._connectNode);
- delete this._connectNode;
- if (this._showTimer) {
- clearTimeout(this._showTimer);
- delete this._showTimer;
- }
- },
- uninitialize : function() {
- this.close();
- }
- });
- }
|