docs/source/ToolTip.html

   1 <html>\r
   2 <head>\r
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
   4   <title>The source code</title>\r
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   7 </head>\r
   8 <body  onload="prettyPrint();">\r
   9     <pre class="prettyprint lang-js"><div id="cls-Ext.ToolTip"></div>/**\r
  10  * @class Ext.ToolTip\r
  11  * @extends Ext.Tip\r
  12  * A standard tooltip implementation for providing additional information when hovering over a target element.\r
  13  * @xtype tooltip\r
  14  * @constructor\r
  15  * Create a new Tooltip\r
  16  * @param {Object} config The configuration options\r
  17  */\r
  18 Ext.ToolTip = Ext.extend(Ext.Tip, {\r
  19     <div id="prop-Ext.ToolTip-triggerElement"></div>/**\r
  20      * When a Tooltip is configured with the <code>{@link #delegate}</code>\r
  21      * option to cause selected child elements of the <code>{@link #target}</code>\r
  22      * Element to each trigger a seperate show event, this property is set to\r
  23      * the DOM element which triggered the show.\r
  24      * @type DOMElement\r
  25      * @property triggerElement\r
  26      */\r
  27     <div id="cfg-Ext.ToolTip-target"></div>/**\r
  28      * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to monitor\r
  29      * for mouseover events to trigger showing this ToolTip.\r
  30      */\r
  31     <div id="cfg-Ext.ToolTip-autoHide"></div>/**\r
  32      * @cfg {Boolean} autoHide True to automatically hide the tooltip after the\r
  33      * mouse exits the target element or after the <code>{@link #dismissDelay}</code>\r
  34      * has expired if set (defaults to true).  If <code>{@link closable} = true</code>\r
  35      * a close tool button will be rendered into the tooltip header.\r
  36      */\r
  37     <div id="cfg-Ext.ToolTip-showDelay"></div>/**\r
  38      * @cfg {Number} showDelay Delay in milliseconds before the tooltip displays\r
  39      * after the mouse enters the target element (defaults to 500)\r
  40      */\r
  41     showDelay : 500,\r
  42     <div id="cfg-Ext.ToolTip-hideDelay"></div>/**\r
  43      * @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the\r
  44      * target element but before the tooltip actually hides (defaults to 200).\r
  45      * Set to 0 for the tooltip to hide immediately.\r
  46      */\r
  47     hideDelay : 200,\r
  48     <div id="cfg-Ext.ToolTip-dismissDelay"></div>/**\r
  49      * @cfg {Number} dismissDelay Delay in milliseconds before the tooltip\r
  50      * automatically hides (defaults to 5000). To disable automatic hiding, set\r
  51      * dismissDelay = 0.\r
  52      */\r
  53     dismissDelay : 5000,\r
  54     <div id="cfg-Ext.ToolTip-mouseOffset"></div>/**\r
  55      * @cfg {Array} mouseOffset An XY offset from the mouse position where the\r
  56      * tooltip should be shown (defaults to [15,18]).\r
  57      */\r
  58     <div id="cfg-Ext.ToolTip-trackMouse"></div>/**\r
  59      * @cfg {Boolean} trackMouse True to have the tooltip follow the mouse as it\r
  60      * moves over the target element (defaults to false).\r
  61      */\r
  62     trackMouse : false,\r
  63     <div id="cfg-Ext.ToolTip-anchorToTarget"></div>/**\r
  64      * @cfg {Boolean} anchorToTarget True to anchor the tooltip to the target\r
  65      * element, false to anchor it relative to the mouse coordinates (defaults\r
  66      * to true).  When <code>anchorToTarget</code> is true, use\r
  67      * <code>{@link #defaultAlign}</code> to control tooltip alignment to the\r
  68      * target element.  When <code>anchorToTarget</code> is false, use\r
  69      * <code>{@link #anchorPosition}</code> instead to control alignment.\r
  70      */\r
  71     anchorToTarget : true,\r
  72     <div id="cfg-Ext.ToolTip-anchorOffset"></div>/**\r
  73      * @cfg {Number} anchorOffset A numeric pixel value used to offset the\r
  74      * default position of the anchor arrow (defaults to 0).  When the anchor\r
  75      * position is on the top or bottom of the tooltip, <code>anchorOffset</code>\r
  76      * will be used as a horizontal offset.  Likewise, when the anchor position\r
  77      * is on the left or right side, <code>anchorOffset</code> will be used as\r
  78      * a vertical offset.\r
  79      */\r
  80     anchorOffset : 0,\r
  81     <div id="cfg-Ext.ToolTip-delegate"></div>/**\r
  82      * @cfg {String} delegate <p>Optional. A {@link Ext.DomQuery DomQuery}\r
  83      * selector which allows selection of individual elements within the\r
  84      * <code>{@link #target}</code> element to trigger showing and hiding the\r
  85      * ToolTip as the mouse moves within the target.</p>\r
  86      * <p>When specified, the child element of the target which caused a show\r
  87      * event is placed into the <code>{@link #triggerElement}</code> property\r
  88      * before the ToolTip is shown.</p>\r
  89      * <p>This may be useful when a Component has regular, repeating elements\r
  90      * in it, each of which need a Tooltip which contains information specific\r
  91      * to that element. For example:</p><pre><code>\r
  92 var myGrid = new Ext.grid.gridPanel(gridConfig);\r
  93 myGrid.on('render', function(grid) {\r
  94     var store = grid.getStore();  // Capture the Store.\r
  95     var view = grid.getView();    // Capture the GridView.\r
  96     myGrid.tip = new Ext.ToolTip({\r
  97         target: view.mainBody,    // The overall target element.\r
  98         delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.\r
  99         trackMouse: true,         // Moving within the row should not hide the tip.\r
 100         renderTo: document.body,  // Render immediately so that tip.body can be\r
 101                                   //  referenced prior to the first show.\r
 102         listeners: {              // Change content dynamically depending on which element\r
 103                                   //  triggered the show.\r
 104             beforeshow: function updateTipBody(tip) {\r
 105                 var rowIndex = view.findRowIndex(tip.triggerElement);\r
 106                 tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id;\r
 107             }\r
 108         }\r
 109     });\r
 110 });\r
 111      *</code></pre>\r
 112      */\r
 113 \r
 114     // private\r
 115     targetCounter : 0,\r
 116 \r
 117     constrainPosition : false,\r
 118 \r
 119     // private\r
 120     initComponent : function(){\r
 121         Ext.ToolTip.superclass.initComponent.call(this);\r
 122         this.lastActive = new Date();\r
 123         this.initTarget(this.target);\r
 124         this.origAnchor = this.anchor;\r
 125     },\r
 126 \r
 127     // private\r
 128     onRender : function(ct, position){\r
 129         Ext.ToolTip.superclass.onRender.call(this, ct, position);\r
 130         this.anchorCls = 'x-tip-anchor-' + this.getAnchorPosition();\r
 131         this.anchorEl = this.el.createChild({\r
 132             cls: 'x-tip-anchor ' + this.anchorCls\r
 133         });\r
 134     },\r
 135 \r
 136     // private\r
 137     afterRender : function(){\r
 138         Ext.ToolTip.superclass.afterRender.call(this);\r
 139         this.anchorEl.setStyle('z-index', this.el.getZIndex() + 1);\r
 140     },\r
 141 \r
 142     <div id="method-Ext.ToolTip-initTarget"></div>/**\r
 143      * Binds this ToolTip to the specified element. The tooltip will be displayed when the mouse moves over the element.\r
 144      * @param {Mixed} t The Element, HtmlElement, or ID of an element to bind to\r
 145      */\r
 146     initTarget : function(target){\r
 147         var t;\r
 148         if((t = Ext.get(target))){\r
 149             if(this.target){\r
 150                 var tg = Ext.get(this.target);\r
 151                 this.mun(tg, 'mouseover', this.onTargetOver, this);\r
 152                 this.mun(tg, 'mouseout', this.onTargetOut, this);\r
 153                 this.mun(tg, 'mousemove', this.onMouseMove, this);\r
 154             }\r
 155             this.mon(t, {\r
 156                 mouseover: this.onTargetOver,\r
 157                 mouseout: this.onTargetOut,\r
 158                 mousemove: this.onMouseMove,\r
 159                 scope: this\r
 160             });\r
 161             this.target = t;\r
 162         }\r
 163         if(this.anchor){\r
 164             this.anchorTarget = this.target;\r
 165         }\r
 166     },\r
 167 \r
 168     // private\r
 169     onMouseMove : function(e){\r
 170         var t = this.delegate ? e.getTarget(this.delegate) : this.triggerElement = true;\r
 171         if (t) {\r
 172             this.targetXY = e.getXY();\r
 173             if (t === this.triggerElement) {\r
 174                 if(!this.hidden && this.trackMouse){\r
 175                     this.setPagePosition(this.getTargetXY());\r
 176                 }\r
 177             } else {\r
 178                 this.hide();\r
 179                 this.lastActive = new Date(0);\r
 180                 this.onTargetOver(e);\r
 181             }\r
 182         } else if (!this.closable && this.isVisible()) {\r
 183             this.hide();\r
 184         }\r
 185     },\r
 186 \r
 187     // private\r
 188     getTargetXY : function(){\r
 189         if(this.delegate){\r
 190             this.anchorTarget = this.triggerElement;\r
 191         }\r
 192         if(this.anchor){\r
 193             this.targetCounter++;\r
 194             var offsets = this.getOffsets(),\r
 195                 xy = (this.anchorToTarget && !this.trackMouse) ? this.el.getAlignToXY(this.anchorTarget, this.getAnchorAlign()) : this.targetXY,\r
 196                 dw = Ext.lib.Dom.getViewWidth() - 5,\r
 197                 dh = Ext.lib.Dom.getViewHeight() - 5,\r
 198                 de = document.documentElement,\r
 199                 bd = document.body,\r
 200                 scrollX = (de.scrollLeft || bd.scrollLeft || 0) + 5,\r
 201                 scrollY = (de.scrollTop || bd.scrollTop || 0) + 5,\r
 202                 axy = [xy[0] + offsets[0], xy[1] + offsets[1]]\r
 203                 sz = this.getSize();\r
 204                 \r
 205             this.anchorEl.removeClass(this.anchorCls);\r
 206 \r
 207             if(this.targetCounter < 2){\r
 208                 if(axy[0] < scrollX){\r
 209                     if(this.anchorToTarget){\r
 210                         this.defaultAlign = 'l-r';\r
 211                         if(this.mouseOffset){this.mouseOffset[0] *= -1;}\r
 212                     }\r
 213                     this.anchor = 'left';\r
 214                     return this.getTargetXY();\r
 215                 }\r
 216                 if(axy[0]+sz.width > dw){\r
 217                     if(this.anchorToTarget){\r
 218                         this.defaultAlign = 'r-l';\r
 219                         if(this.mouseOffset){this.mouseOffset[0] *= -1;}\r
 220                     }\r
 221                     this.anchor = 'right';\r
 222                     return this.getTargetXY();\r
 223                 }\r
 224                 if(axy[1] < scrollY){\r
 225                     if(this.anchorToTarget){\r
 226                         this.defaultAlign = 't-b';\r
 227                         if(this.mouseOffset){this.mouseOffset[1] *= -1;}\r
 228                     }\r
 229                     this.anchor = 'top';\r
 230                     return this.getTargetXY();\r
 231                 }\r
 232                 if(axy[1]+sz.height > dh){\r
 233                     if(this.anchorToTarget){\r
 234                         this.defaultAlign = 'b-t';\r
 235                         if(this.mouseOffset){this.mouseOffset[1] *= -1;}\r
 236                     }\r
 237                     this.anchor = 'bottom';\r
 238                     return this.getTargetXY();\r
 239                 }\r
 240             }\r
 241 \r
 242             this.anchorCls = 'x-tip-anchor-'+this.getAnchorPosition();\r
 243             this.anchorEl.addClass(this.anchorCls);\r
 244             this.targetCounter = 0;\r
 245             return axy;\r
 246         }else{\r
 247             var mouseOffset = this.getMouseOffset();\r
 248             return [this.targetXY[0]+mouseOffset[0], this.targetXY[1]+mouseOffset[1]];\r
 249         }\r
 250     },\r
 251 \r
 252     getMouseOffset : function(){\r
 253         var offset = this.anchor ? [0,0] : [15,18];\r
 254         if(this.mouseOffset){\r
 255             offset[0] += this.mouseOffset[0];\r
 256             offset[1] += this.mouseOffset[1];\r
 257         }\r
 258         return offset;\r
 259     },\r
 260 \r
 261     // private\r
 262     getAnchorPosition : function(){\r
 263         if(this.anchor){\r
 264             this.tipAnchor = this.anchor.charAt(0);\r
 265         }else{\r
 266             var m = this.defaultAlign.match(/^([a-z]+)-([a-z]+)(\?)?$/);\r
 267             if(!m){\r
 268                throw 'AnchorTip.defaultAlign is invalid';\r
 269             }\r
 270             this.tipAnchor = m[1].charAt(0);\r
 271         }\r
 272 \r
 273         switch(this.tipAnchor){\r
 274             case 't': return 'top';\r
 275             case 'b': return 'bottom';\r
 276             case 'r': return 'right';\r
 277         }\r
 278         return 'left';\r
 279     },\r
 280 \r
 281     // private\r
 282     getAnchorAlign : function(){\r
 283         switch(this.anchor){\r
 284             case 'top'  : return 'tl-bl';\r
 285             case 'left' : return 'tl-tr';\r
 286             case 'right': return 'tr-tl';\r
 287             default     : return 'bl-tl';\r
 288         }\r
 289     },\r
 290 \r
 291     // private\r
 292     getOffsets : function(){\r
 293         var offsets, \r
 294             ap = this.getAnchorPosition().charAt(0);\r
 295         if(this.anchorToTarget && !this.trackMouse){\r
 296             switch(ap){\r
 297                 case 't':\r
 298                     offsets = [0, 9];\r
 299                     break;\r
 300                 case 'b':\r
 301                     offsets = [0, -13];\r
 302                     break;\r
 303                 case 'r':\r
 304                     offsets = [-13, 0];\r
 305                     break;\r
 306                 default:\r
 307                     offsets = [9, 0];\r
 308                     break;\r
 309             }\r
 310         }else{\r
 311             switch(ap){\r
 312                 case 't':\r
 313                     offsets = [-15-this.anchorOffset, 30];\r
 314                     break;\r
 315                 case 'b':\r
 316                     offsets = [-19-this.anchorOffset, -13-this.el.dom.offsetHeight];\r
 317                     break;\r
 318                 case 'r':\r
 319                     offsets = [-15-this.el.dom.offsetWidth, -13-this.anchorOffset];\r
 320                     break;\r
 321                 default:\r
 322                     offsets = [25, -13-this.anchorOffset];\r
 323                     break;\r
 324             }\r
 325         }\r
 326         var mouseOffset = this.getMouseOffset();\r
 327         offsets[0] += mouseOffset[0];\r
 328         offsets[1] += mouseOffset[1];\r
 329 \r
 330         return offsets;\r
 331     },\r
 332 \r
 333     // private\r
 334     onTargetOver : function(e){\r
 335         if(this.disabled || e.within(this.target.dom, true)){\r
 336             return;\r
 337         }\r
 338         var t = e.getTarget(this.delegate);\r
 339         if (t) {\r
 340             this.triggerElement = t;\r
 341             this.clearTimer('hide');\r
 342             this.targetXY = e.getXY();\r
 343             this.delayShow();\r
 344         }\r
 345     },\r
 346 \r
 347     // private\r
 348     delayShow : function(){\r
 349         if(this.hidden && !this.showTimer){\r
 350             if(this.lastActive.getElapsed() < this.quickShowInterval){\r
 351                 this.show();\r
 352             }else{\r
 353                 this.showTimer = this.show.defer(this.showDelay, this);\r
 354             }\r
 355         }else if(!this.hidden && this.autoHide !== false){\r
 356             this.show();\r
 357         }\r
 358     },\r
 359 \r
 360     // private\r
 361     onTargetOut : function(e){\r
 362         if(this.disabled || e.within(this.target.dom, true)){\r
 363             return;\r
 364         }\r
 365         this.clearTimer('show');\r
 366         if(this.autoHide !== false){\r
 367             this.delayHide();\r
 368         }\r
 369     },\r
 370 \r
 371     // private\r
 372     delayHide : function(){\r
 373         if(!this.hidden && !this.hideTimer){\r
 374             this.hideTimer = this.hide.defer(this.hideDelay, this);\r
 375         }\r
 376     },\r
 377 \r
 378     <div id="method-Ext.ToolTip-hide"></div>/**\r
 379      * Hides this tooltip if visible.\r
 380      */\r
 381     hide: function(){\r
 382         this.clearTimer('dismiss');\r
 383         this.lastActive = new Date();\r
 384         if(this.anchorEl){\r
 385             this.anchorEl.hide();\r
 386         }\r
 387         Ext.ToolTip.superclass.hide.call(this);\r
 388         delete this.triggerElement;\r
 389     },\r
 390 \r
 391     <div id="method-Ext.ToolTip-show"></div>/**\r
 392      * Shows this tooltip at the current event target XY position.\r
 393      */\r
 394     show : function(){\r
 395         if(this.anchor){\r
 396             // pre-show it off screen so that the el will have dimensions\r
 397             // for positioning calcs when getting xy next\r
 398             this.showAt([-1000,-1000]);\r
 399             this.origConstrainPosition = this.constrainPosition;\r
 400             this.constrainPosition = false;\r
 401             this.anchor = this.origAnchor;\r
 402         }\r
 403         this.showAt(this.getTargetXY());\r
 404 \r
 405         if(this.anchor){\r
 406             this.syncAnchor();\r
 407             this.anchorEl.show();\r
 408             this.constrainPosition = this.origConstrainPosition;\r
 409         }else{\r
 410             this.anchorEl.hide();\r
 411         }\r
 412     },\r
 413 \r
 414     // inherit docs\r
 415     showAt : function(xy){\r
 416         this.lastActive = new Date();\r
 417         this.clearTimers();\r
 418         Ext.ToolTip.superclass.showAt.call(this, xy);\r
 419         if(this.dismissDelay && this.autoHide !== false){\r
 420             this.dismissTimer = this.hide.defer(this.dismissDelay, this);\r
 421         }\r
 422         if(this.anchor && !this.anchorEl.isVisible()){\r
 423             this.syncAnchor();\r
 424             this.anchorEl.show();\r
 425         }\r
 426     },\r
 427 \r
 428     // private\r
 429     syncAnchor : function(){\r
 430         var anchorPos, targetPos, offset;\r
 431         switch(this.tipAnchor.charAt(0)){\r
 432             case 't':\r
 433                 anchorPos = 'b';\r
 434                 targetPos = 'tl';\r
 435                 offset = [20+this.anchorOffset, 2];\r
 436                 break;\r
 437             case 'r':\r
 438                 anchorPos = 'l';\r
 439                 targetPos = 'tr';\r
 440                 offset = [-2, 11+this.anchorOffset];\r
 441                 break;\r
 442             case 'b':\r
 443                 anchorPos = 't';\r
 444                 targetPos = 'bl';\r
 445                 offset = [20+this.anchorOffset, -2];\r
 446                 break;\r
 447             default:\r
 448                 anchorPos = 'r';\r
 449                 targetPos = 'tl';\r
 450                 offset = [2, 11+this.anchorOffset];\r
 451                 break;\r
 452         }\r
 453         this.anchorEl.alignTo(this.el, anchorPos+'-'+targetPos, offset);\r
 454     },\r
 455 \r
 456     // private\r
 457     setPagePosition : function(x, y){\r
 458         Ext.ToolTip.superclass.setPagePosition.call(this, x, y);\r
 459         if(this.anchor){\r
 460             this.syncAnchor();\r
 461         }\r
 462     },\r
 463 \r
 464     // private\r
 465     clearTimer : function(name){\r
 466         name = name + 'Timer';\r
 467         clearTimeout(this[name]);\r
 468         delete this[name];\r
 469     },\r
 470 \r
 471     // private\r
 472     clearTimers : function(){\r
 473         this.clearTimer('show');\r
 474         this.clearTimer('dismiss');\r
 475         this.clearTimer('hide');\r
 476     },\r
 477 \r
 478     // private\r
 479     onShow : function(){\r
 480         Ext.ToolTip.superclass.onShow.call(this);\r
 481         Ext.getDoc().on('mousedown', this.onDocMouseDown, this);\r
 482     },\r
 483 \r
 484     // private\r
 485     onHide : function(){\r
 486         Ext.ToolTip.superclass.onHide.call(this);\r
 487         Ext.getDoc().un('mousedown', this.onDocMouseDown, this);\r
 488     },\r
 489 \r
 490     // private\r
 491     onDocMouseDown : function(e){\r
 492         if(this.autoHide !== true && !this.closable && !e.within(this.el.dom)){\r
 493             this.disable();\r
 494             this.enable.defer(100, this);\r
 495         }\r
 496     },\r
 497 \r
 498     // private\r
 499     onDisable : function(){\r
 500         this.clearTimers();\r
 501         this.hide();\r
 502     },\r
 503 \r
 504     // private\r
 505     adjustPosition : function(x, y){\r
 506         if(this.contstrainPosition){\r
 507             var ay = this.targetXY[1], h = this.getSize().height;\r
 508             if(y <= ay && (y+h) >= ay){\r
 509                 y = ay-h-5;\r
 510             }\r
 511         }\r
 512         return {x : x, y: y};\r
 513     },\r
 514     \r
 515     beforeDestroy : function(){\r
 516         this.clearTimers();\r
 517         Ext.destroy(this.anchorEl);\r
 518         delete this.anchorEl;\r
 519         delete this.target;\r
 520         delete this.anchorTarget;\r
 521         delete this.triggerElement;\r
 522         Ext.ToolTip.superclass.beforeDestroy.call(this);    \r
 523     },\r
 524 \r
 525     // private\r
 526     onDestroy : function(){\r
 527         Ext.getDoc().un('mousedown', this.onDocMouseDown, this);\r
 528         Ext.ToolTip.superclass.onDestroy.call(this);\r
 529     }\r
 530 });\r
 531 \r
 532 Ext.reg('tooltip', Ext.ToolTip);</pre>    \r
 533 </body>\r
 534 </html>