{@link #delegate}
+ * option to cause selected child elements of the {@link #target}
+ * Element to each trigger a seperate show event, this property is set to
+ * the DOM element which triggered the show.
* @type DOMElement
* @property triggerElement
*/
/**
- * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to monitor for mouseover events to trigger
- * showing this ToolTip.
+ * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to monitor
+ * for mouseover events to trigger showing this ToolTip.
*/
/**
- * @cfg {Boolean} autoHide True to automatically hide the tooltip after the mouse exits the target element
- * or after the {@link #dismissDelay} has expired if set (defaults to true). If {@link closable} = true a close
- * tool button will be rendered into the tooltip header.
+ * @cfg {Boolean} autoHide True to automatically hide the tooltip after the
+ * mouse exits the target element or after the {@link #dismissDelay}
+ * has expired if set (defaults to true). If {@link closable} = true
+ * a close tool button will be rendered into the tooltip header.
*/
/**
- * @cfg {Number} showDelay Delay in milliseconds before the tooltip displays after the mouse enters the
- * target element (defaults to 500)
+ * @cfg {Number} showDelay Delay in milliseconds before the tooltip displays
+ * after the mouse enters the target element (defaults to 500)
*/
- showDelay: 500,
+ showDelay : 500,
/**
- * @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the target element but before the
- * tooltip actually hides (defaults to 200). Set to 0 for the tooltip to hide immediately.
+ * @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the
+ * target element but before the tooltip actually hides (defaults to 200).
+ * Set to 0 for the tooltip to hide immediately.
*/
- hideDelay: 200,
+ hideDelay : 200,
/**
- * @cfg {Number} dismissDelay Delay in milliseconds before the tooltip automatically hides (defaults to 5000).
- * To disable automatic hiding, set dismissDelay = 0.
+ * @cfg {Number} dismissDelay Delay in milliseconds before the tooltip
+ * automatically hides (defaults to 5000). To disable automatic hiding, set
+ * dismissDelay = 0.
*/
- dismissDelay: 5000,
+ dismissDelay : 5000,
/**
- * @cfg {Array} mouseOffset An XY offset from the mouse position where the tooltip should be shown (defaults to [15,18]).
+ * @cfg {Array} mouseOffset An XY offset from the mouse position where the
+ * tooltip should be shown (defaults to [15,18]).
*/
/**
- * @cfg {Boolean} trackMouse True to have the tooltip follow the mouse as it moves over the target element (defaults to false).
+ * @cfg {Boolean} trackMouse True to have the tooltip follow the mouse as it
+ * moves over the target element (defaults to false).
*/
trackMouse : false,
/**
- * @cfg {Boolean} anchorToTarget True to anchor the tooltip to the target element, false to
- * anchor it relative to the mouse coordinates (defaults to true). When anchorToTarget is
- * true, use {@link #defaultAlign} to control tooltip alignment to the target element. When
- * anchorToTarget is false, use {@link #anchorPosition} instead to control alignment.
+ * @cfg {Boolean} anchorToTarget True to anchor the tooltip to the target
+ * element, false to anchor it relative to the mouse coordinates (defaults
+ * to true). When anchorToTarget is true, use
+ * {@link #defaultAlign} to control tooltip alignment to the
+ * target element. When anchorToTarget is false, use
+ * {@link #anchorPosition} instead to control alignment.
*/
- anchorToTarget: true,
+ anchorToTarget : true,
/**
- * @cfg {Number} anchorOffset A numeric pixel value used to offset the default position of the
- * anchor arrow (defaults to 0). When the anchor position is on the top or bottom of the tooltip,
- * anchorOffset will be used as a horizontal offset. Likewise, when the anchor position is on the
- * left or right side, anchorOffset will be used as a vertical offset.
+ * @cfg {Number} anchorOffset A numeric pixel value used to offset the
+ * default position of the anchor arrow (defaults to 0). When the anchor
+ * position is on the top or bottom of the tooltip, anchorOffset
+ * will be used as a horizontal offset. Likewise, when the anchor position
+ * is on the left or right side, anchorOffset will be used as
+ * a vertical offset.
*/
- anchorOffset: 0,
+ anchorOffset : 0,
/**
- * @cfg {String} delegate Optional. A {@link Ext.DomQuery DomQuery} selector which allows selection of individual elements - * within the {@link #target} element to trigger showing and hiding the ToolTip as the mouse moves within the target.
- *When specified, the child element of the target which caused a show event is placed into the {@link #triggerElement} property + * @cfg {String} delegate
Optional. A {@link Ext.DomQuery DomQuery}
+ * selector which allows selection of individual elements within the
+ * {@link #target} element to trigger showing and hiding the
+ * ToolTip as the mouse moves within the target.
When specified, the child element of the target which caused a show
+ * event is placed into the {@link #triggerElement} property
* before the ToolTip is shown.
This may be useful when a Component has regular, repeating elements in it, each of which need a Tooltip which contains - * information specific to that element. For example:
+ * This may be useful when a Component has regular, repeating elements
+ * in it, each of which need a Tooltip which contains information specific
+ * to that element. For example:
var myGrid = new Ext.grid.gridPanel(gridConfig);
myGrid.on('render', function(grid) {
var store = grid.getStore(); // Capture the Store.
@@ -229,24 +248,27 @@ myGrid.on('render', function(grid) {
target: view.mainBody, // The overall target element.
delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.
trackMouse: true, // Moving within the row should not hide the tip.
- renderTo: document.body, // Render immediately so that tip.body can be referenced prior to the first show.
- listeners: { // Change content dynamically depending on which element triggered the show.
+ renderTo: document.body, // Render immediately so that tip.body can be
+ // referenced prior to the first show.
+ listeners: { // Change content dynamically depending on which element
+ // triggered the show.
beforeshow: function updateTipBody(tip) {
var rowIndex = view.findRowIndex(tip.triggerElement);
- tip.body.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;
+ tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id;
}
}
});
-});
+});
+ *Provides attractive and customizable tooltips for any element. The QuickTips * singleton is used to configure and manage tooltips globally for multiple elements