Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / docs / source / ToolTip.html
index b0cf4ce..3e30671 100644 (file)
@@ -1,77 +1,99 @@
-<html>\r
-<head>\r
-  <title>The source code</title>\r
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body  onload="prettyPrint();">\r
-    <pre class="prettyprint lang-js"><div id="cls-Ext.ToolTip"></div>/**\r
+<html>
+<head>
+  <title>The source code</title>
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.0.3
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+<div id="cls-Ext.ToolTip"></div>/**\r
  * @class Ext.ToolTip\r
  * @extends Ext.Tip\r
  * A standard tooltip implementation for providing additional information when hovering over a target element.\r
+ * @xtype tooltip\r
  * @constructor\r
  * Create a new Tooltip\r
  * @param {Object} config The configuration options\r
  */\r
 Ext.ToolTip = Ext.extend(Ext.Tip, {\r
     <div id="prop-Ext.ToolTip-triggerElement"></div>/**\r
-     * When a Tooltip is configured with the {@link #delegate} option to cause selected child elements of the {@link #target}\r
-     * Element to each trigger a seperate show event, this property is set to the DOM element which triggered the show.\r
+     * When a Tooltip is configured with the <code>{@link #delegate}</code>\r
+     * option to cause selected child elements of the <code>{@link #target}</code>\r
+     * Element to each trigger a seperate show event, this property is set to\r
+     * the DOM element which triggered the show.\r
      * @type DOMElement\r
      * @property triggerElement\r
      */\r
     <div id="cfg-Ext.ToolTip-target"></div>/**\r
-     * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to monitor for mouseover events to trigger\r
-     * showing this ToolTip.\r
+     * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to monitor\r
+     * for mouseover events to trigger showing this ToolTip.\r
      */\r
     <div id="cfg-Ext.ToolTip-autoHide"></div>/**\r
-     * @cfg {Boolean} autoHide True to automatically hide the tooltip after the mouse exits the target element\r
-     * or after the {@link #dismissDelay} has expired if set (defaults to true).  If {@link closable} = true a close\r
-     * tool button will be rendered into the tooltip header.\r
+     * @cfg {Boolean} autoHide True to automatically hide the tooltip after the\r
+     * mouse exits the target element or after the <code>{@link #dismissDelay}</code>\r
+     * has expired if set (defaults to true).  If <code>{@link closable} = true</code>\r
+     * a close tool button will be rendered into the tooltip header.\r
      */\r
     <div id="cfg-Ext.ToolTip-showDelay"></div>/**\r
-     * @cfg {Number} showDelay Delay in milliseconds before the tooltip displays after the mouse enters the\r
-     * target element (defaults to 500)\r
+     * @cfg {Number} showDelay Delay in milliseconds before the tooltip displays\r
+     * after the mouse enters the target element (defaults to 500)\r
      */\r
-    showDelay: 500,\r
+    showDelay : 500,\r
     <div id="cfg-Ext.ToolTip-hideDelay"></div>/**\r
-     * @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the target element but before the\r
-     * tooltip actually hides (defaults to 200).  Set to 0 for the tooltip to hide immediately.\r
+     * @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the\r
+     * target element but before the tooltip actually hides (defaults to 200).\r
+     * Set to 0 for the tooltip to hide immediately.\r
      */\r
-    hideDelay: 200,\r
+    hideDelay : 200,\r
     <div id="cfg-Ext.ToolTip-dismissDelay"></div>/**\r
-     * @cfg {Number} dismissDelay Delay in milliseconds before the tooltip automatically hides (defaults to 5000).\r
-     * To disable automatic hiding, set dismissDelay = 0.\r
+     * @cfg {Number} dismissDelay Delay in milliseconds before the tooltip\r
+     * automatically hides (defaults to 5000). To disable automatic hiding, set\r
+     * dismissDelay = 0.\r
      */\r
-    dismissDelay: 5000,\r
+    dismissDelay : 5000,\r
     <div id="cfg-Ext.ToolTip-mouseOffset"></div>/**\r
-     * @cfg {Array} mouseOffset An XY offset from the mouse position where the tooltip should be shown (defaults to [15,18]).\r
+     * @cfg {Array} mouseOffset An XY offset from the mouse position where the\r
+     * tooltip should be shown (defaults to [15,18]).\r
      */\r
     <div id="cfg-Ext.ToolTip-trackMouse"></div>/**\r
-     * @cfg {Boolean} trackMouse True to have the tooltip follow the mouse as it moves over the target element (defaults to false).\r
+     * @cfg {Boolean} trackMouse True to have the tooltip follow the mouse as it\r
+     * moves over the target element (defaults to false).\r
      */\r
     trackMouse : false,\r
     <div id="cfg-Ext.ToolTip-anchorToTarget"></div>/**\r
-     * @cfg {Boolean} anchorToTarget True to anchor the tooltip to the target element, false to\r
-     * anchor it relative to the mouse coordinates (defaults to true).  When anchorToTarget is\r
-     * true, use {@link #defaultAlign} to control tooltip alignment to the target element.  When\r
-     * anchorToTarget is false, use {@link #anchorPosition} instead to control alignment.\r
+     * @cfg {Boolean} anchorToTarget True to anchor the tooltip to the target\r
+     * element, false to anchor it relative to the mouse coordinates (defaults\r
+     * to true).  When <code>anchorToTarget</code> is true, use\r
+     * <code>{@link #defaultAlign}</code> to control tooltip alignment to the\r
+     * target element.  When <code>anchorToTarget</code> is false, use\r
+     * <code>{@link #anchorPosition}</code> instead to control alignment.\r
      */\r
-    anchorToTarget: true,\r
+    anchorToTarget : true,\r
     <div id="cfg-Ext.ToolTip-anchorOffset"></div>/**\r
-     * @cfg {Number} anchorOffset A numeric pixel value used to offset the default position of the\r
-     * anchor arrow (defaults to 0).  When the anchor position is on the top or bottom of the tooltip,\r
-     * anchorOffset will be used as a horizontal offset.  Likewise, when the anchor position is on the\r
-     * left or right side, anchorOffset will be used as a vertical offset.\r
+     * @cfg {Number} anchorOffset A numeric pixel value used to offset the\r
+     * default position of the anchor arrow (defaults to 0).  When the anchor\r
+     * position is on the top or bottom of the tooltip, <code>anchorOffset</code>\r
+     * will be used as a horizontal offset.  Likewise, when the anchor position\r
+     * is on the left or right side, <code>anchorOffset</code> will be used as\r
+     * a vertical offset.\r
      */\r
-    anchorOffset: 0,\r
+    anchorOffset : 0,\r
     <div id="cfg-Ext.ToolTip-delegate"></div>/**\r
-     * @cfg {String} delegate <p>Optional. A {@link Ext.DomQuery DomQuery} selector which allows selection of individual elements\r
-     * within the {@link #target} element to trigger showing and hiding the ToolTip as the mouse moves within the target.</p>\r
-     * <p>When specified, the child element of the target which caused a show event is placed into the {@link #triggerElement} property\r
+     * @cfg {String} delegate <p>Optional. A {@link Ext.DomQuery DomQuery}\r
+     * selector which allows selection of individual elements within the\r
+     * <code>{@link #target}</code> element to trigger showing and hiding the\r
+     * ToolTip as the mouse moves within the target.</p>\r
+     * <p>When specified, the child element of the target which caused a show\r
+     * event is placed into the <code>{@link #triggerElement}</code> property\r
      * before the ToolTip is shown.</p>\r
-     * <p>This may be useful when a Component has regular, repeating elements in it, each of which need a Tooltip which contains\r
-     * information specific to that element. For example:</p><pre><code>\r
+     * <p>This may be useful when a Component has regular, repeating elements\r
+     * in it, each of which need a Tooltip which contains information specific\r
+     * to that element. For example:</p><pre><code>\r
 var myGrid = new Ext.grid.gridPanel(gridConfig);\r
 myGrid.on('render', function(grid) {\r
     var store = grid.getStore();  // Capture the Store.\r
@@ -80,24 +102,27 @@ myGrid.on('render', function(grid) {
         target: view.mainBody,    // The overall target element.\r
         delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.\r
         trackMouse: true,         // Moving within the row should not hide the tip.\r
-        renderTo: document.body,  // Render immediately so that tip.body can be referenced prior to the first show.\r
-        listeners: {              // Change content dynamically depending on which element triggered the show.\r
+        renderTo: document.body,  // Render immediately so that tip.body can be\r
+                                  //  referenced prior to the first show.\r
+        listeners: {              // Change content dynamically depending on which element\r
+                                  //  triggered the show.\r
             beforeshow: function updateTipBody(tip) {\r
                 var rowIndex = view.findRowIndex(tip.triggerElement);\r
-                tip.body.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;\r
+                tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id;\r
             }\r
         }\r
     });\r
-});</code></pre>\r
+});\r
+     *</code></pre>\r
      */\r
 \r
     // private\r
-    targetCounter: 0,\r
+    targetCounter : 0,\r
 \r
-    constrainPosition: false,\r
+    constrainPosition : false,\r
 \r
     // private\r
-    initComponent: function(){\r
+    initComponent : function(){\r
         Ext.ToolTip.superclass.initComponent.call(this);\r
         this.lastActive = new Date();\r
         this.initTarget(this.target);\r
@@ -127,10 +152,10 @@ myGrid.on('render', function(grid) {
         var t;\r
         if((t = Ext.get(target))){\r
             if(this.target){\r
-                this.target = Ext.get(this.target);\r
-                this.target.un('mouseover', this.onTargetOver, this);\r
-                this.target.un('mouseout', this.onTargetOut, this);\r
-                this.target.un('mousemove', this.onMouseMove, this);\r
+                var tg = Ext.get(this.target);\r
+                this.mun(tg, 'mouseover', this.onTargetOver, this);\r
+                this.mun(tg, 'mouseout', this.onTargetOut, this);\r
+                this.mun(tg, 'mousemove', this.onMouseMove, this);\r
             }\r
             this.mon(t, {\r
                 mouseover: this.onTargetOver,\r
@@ -166,6 +191,9 @@ myGrid.on('render', function(grid) {
 \r
     // private\r
     getTargetXY : function(){\r
+        if(this.delegate){\r
+            this.anchorTarget = this.triggerElement;\r
+        }\r
         if(this.anchor){\r
             this.targetCounter++;\r
             var offsets = this.getOffsets();\r
@@ -243,7 +271,7 @@ myGrid.on('render', function(grid) {
         }else{\r
             var m = this.defaultAlign.match(/^([a-z]+)-([a-z]+)(\?)?$/);\r
             if(!m){\r
-               throw "AnchorTip.defaultAlign is invalid";\r
+               throw 'AnchorTip.defaultAlign is invalid';\r
             }\r
             this.tipAnchor = m[1].charAt(0);\r
         }\r
@@ -267,7 +295,7 @@ myGrid.on('render', function(grid) {
     },\r
 \r
     // private\r
-    getOffsets: function(){\r
+    getOffsets : function(){\r
         var offsets, ap = this.getAnchorPosition().charAt(0);\r
         if(this.anchorToTarget && !this.trackMouse){\r
             switch(ap){\r
@@ -396,6 +424,10 @@ myGrid.on('render', function(grid) {
         if(this.dismissDelay && this.autoHide !== false){\r
             this.dismissTimer = this.hide.defer(this.dismissDelay, this);\r
         }\r
+        if(this.anchor && !this.anchorEl.isVisible()){\r
+            this.syncAnchor();\r
+            this.anchorEl.show();\r
+        }\r
     },\r
 \r
     // private\r
@@ -490,6 +522,8 @@ myGrid.on('render', function(grid) {
         Ext.getDoc().un('mousedown', this.onDocMouseDown, this);\r
         Ext.ToolTip.superclass.onDestroy.call(this);\r
     }\r
-});</pre>    \r
-</body>\r
+});\r
+\r
+Ext.reg('tooltip', Ext.ToolTip);</pre>
+</body>
 </html>
\ No newline at end of file