488f6535b36a7d088f4916193ddd622b91c372e3.svn-base 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
  1. if (!dojo._hasResource["dijit.Tooltip"]) { // _hasResource checks added by
  2. // build. Do not use _hasResource
  3. // directly in your code.
  4. dojo._hasResource["dijit.Tooltip"] = true;
  5. dojo.provide("dijit.Tooltip");
  6. dojo.require("dijit._Widget");
  7. dojo.require("dijit._Templated");
  8. dojo.declare("dijit._MasterTooltip", [dijit._Widget, dijit._Templated], {
  9. // summary
  10. // Internal widget that holds the actual tooltip markup,
  11. // which occurs once per page.
  12. // Called by Tooltip widgets which are just containers to hold
  13. // the markup
  14. // duration: Integer
  15. // Milliseconds to fade in/fade out
  16. duration : 200,
  17. 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",
  18. postCreate : function() {
  19. dojo.body().appendChild(this.domNode);
  20. this.bgIframe = new dijit.BackgroundIframe(this.domNode);
  21. // Setup fade-in and fade-out functions.
  22. this.fadeIn = dojo.fadeIn({
  23. node : this.domNode,
  24. duration : this.duration,
  25. onEnd : dojo.hitch(this, "_onShow")
  26. });
  27. this.fadeOut = dojo.fadeOut({
  28. node : this.domNode,
  29. duration : this.duration,
  30. onEnd : dojo.hitch(this, "_onHide")
  31. });
  32. },
  33. show : function(/* String */innerHTML, /* DomNode */aroundNode) {
  34. // summary:
  35. // Display tooltip w/specified contents to right specified node
  36. // (To left if there's no space on the right, or if LTR==right)
  37. if (this.aroundNode && this.aroundNode === aroundNode) {
  38. return;
  39. }
  40. if (this.fadeOut.status() == "playing") {
  41. // previous tooltip is being hidden; wait until the hide
  42. // completes then show new one
  43. this._onDeck = arguments;
  44. return;
  45. }
  46. this.containerNode.innerHTML = innerHTML;
  47. // Firefox bug. when innerHTML changes to be shorter than previous
  48. // one, the node size will not be updated until it moves.
  49. this.domNode.style.top = (this.domNode.offsetTop + 1) + "px";
  50. // position the element and change CSS according to position
  51. var align = this.isLeftToRight() ? {
  52. 'BR' : 'BL',
  53. 'BL' : 'BR'
  54. } : {
  55. 'BL' : 'BR',
  56. 'BR' : 'BL'
  57. };
  58. var pos = dijit.placeOnScreenAroundElement(this.domNode,
  59. aroundNode, align);
  60. this.domNode.className = "dijitTooltip dijitTooltip"
  61. + (pos.corner == 'BL' ? "Right" : "Left");// FIXME: might
  62. // overwrite
  63. // class
  64. // show it
  65. dojo.style(this.domNode, "opacity", 0);
  66. this.fadeIn.play();
  67. this.isShowingNow = true;
  68. this.aroundNode = aroundNode;
  69. },
  70. _onShow : function() {
  71. if (dojo.isIE) {
  72. // the arrow won't show up on a node w/an opacity filter
  73. this.domNode.style.filter = "";
  74. }
  75. },
  76. hide : function(aroundNode) {
  77. // summary: hide the tooltip
  78. if (!this.aroundNode || this.aroundNode !== aroundNode) {
  79. return;
  80. }
  81. if (this._onDeck) {
  82. // this hide request is for a show() that hasn't even started
  83. // yet;
  84. // just cancel the pending show()
  85. this._onDeck = null;
  86. return;
  87. }
  88. this.fadeIn.stop();
  89. this.isShowingNow = false;
  90. this.aroundNode = null;
  91. this.fadeOut.play();
  92. },
  93. _onHide : function() {
  94. this.domNode.style.cssText = ""; // to position offscreen again
  95. if (this._onDeck) {
  96. // a show request has been queued up; do it now
  97. this.show.apply(this, this._onDeck);
  98. this._onDeck = null;
  99. }
  100. }
  101. });
  102. dijit.showTooltip = function(/* String */innerHTML, /* DomNode */aroundNode) {
  103. // summary:
  104. // Display tooltip w/specified contents to right specified node
  105. // (To left if there's no space on the right, or if LTR==right)
  106. if (!dijit._masterTT) {
  107. dijit._masterTT = new dijit._MasterTooltip();
  108. }
  109. return dijit._masterTT.show(innerHTML, aroundNode);
  110. };
  111. dijit.hideTooltip = function(aroundNode) {
  112. // summary: hide the tooltip
  113. if (!dijit._masterTT) {
  114. dijit._masterTT = new dijit._MasterTooltip();
  115. }
  116. return dijit._masterTT.hide(aroundNode);
  117. };
  118. dojo.declare("dijit.Tooltip", dijit._Widget, {
  119. // summary
  120. // Pops up a tooltip (a help message) when you hover over a
  121. // node.
  122. // label: String
  123. // Text to display in the tooltip.
  124. // Specified as innerHTML when creating the widget from markup.
  125. label : "",
  126. // showDelay: Integer
  127. // Number of milliseconds to wait after hovering over/focusing
  128. // on the object, before
  129. // the tooltip is displayed.
  130. showDelay : 400,
  131. // connectId: String[]
  132. // Id(s) of domNodes to attach the tooltip to.
  133. // When user hovers over any of the specified dom nodes, the
  134. // tooltip will appear.
  135. connectId : [],
  136. postCreate : function() {
  137. if (this.srcNodeRef) {
  138. this.srcNodeRef.style.display = "none";
  139. }
  140. this._connectNodes = [];
  141. dojo.forEach(this.connectId, function(id) {
  142. var node = dojo.byId(id);
  143. if (node) {
  144. this._connectNodes.push(node);
  145. dojo.forEach(["onMouseOver", "onMouseOut",
  146. "onFocus", "onBlur",
  147. "onHover", "onUnHover"],
  148. function(event) {
  149. this.connect(node, event
  150. .toLowerCase(),
  151. "_" + event);
  152. }, this);
  153. if (dojo.isIE) {
  154. // BiDi workaround
  155. node.style.zoom = 1;
  156. }
  157. }
  158. }, this);
  159. },
  160. _onMouseOver : function(/* Event */e) {
  161. this._onHover(e);
  162. },
  163. _onMouseOut : function(/* Event */e) {
  164. if (dojo.isDescendant(e.relatedTarget, e.target)) {
  165. // false event; just moved from target to target child;
  166. // ignore.
  167. return;
  168. }
  169. this._onUnHover(e);
  170. },
  171. _onFocus : function(/* Event */e) {
  172. this._focus = true;
  173. this._onHover(e);
  174. },
  175. _onBlur : function(/* Event */e) {
  176. this._focus = false;
  177. this._onUnHover(e);
  178. },
  179. _onHover : function(/* Event */e) {
  180. if (!this._showTimer) {
  181. var target = e.target;
  182. this._showTimer = setTimeout(dojo.hitch(this,
  183. function() {
  184. this.open(target)
  185. }), this.showDelay);
  186. }
  187. },
  188. _onUnHover : function(/* Event */e) {
  189. // keep a tooltip open if the associated element has focus
  190. if (this._focus) {
  191. return;
  192. }
  193. if (this._showTimer) {
  194. clearTimeout(this._showTimer);
  195. delete this._showTimer;
  196. }
  197. this.close();
  198. },
  199. open : function(/* DomNode */target) {
  200. // summary: display the tooltip; usually not called
  201. // directly.
  202. target = target || this._connectNodes[0];
  203. if (!target) {
  204. return;
  205. }
  206. if (this._showTimer) {
  207. clearTimeout(this._showTimer);
  208. delete this._showTimer;
  209. }
  210. dijit.showTooltip(this.label || this.domNode.innerHTML,
  211. target);
  212. this._connectNode = target;
  213. },
  214. close : function() {
  215. // summary: hide the tooltip; usually not called directly.
  216. dijit.hideTooltip(this._connectNode);
  217. delete this._connectNode;
  218. if (this._showTimer) {
  219. clearTimeout(this._showTimer);
  220. delete this._showTimer;
  221. }
  222. },
  223. uninitialize : function() {
  224. this.close();
  225. }
  226. });
  227. }