* tooltip when hovering over a certain element or elements on the page. It allows fine-grained
* control over the tooltip's alignment relative to the target element or mouse, and the timing
* of when it is automatically shown and hidden.
- *
+ *
* This implementation does **not** have a built-in method of automatically populating the tooltip's
* text based on the target element; you must either configure a fixed {@link #html} value for each
* ToolTip instance, or implement custom logic (e.g. in a {@link #beforeshow} event listener) to
* generate the appropriate tooltip content on the fly. See {@link Ext.tip.QuickTip} for a more
* convenient way of automatically populating and configuring a tooltip based on specific DOM
* attributes of each target element.
- *
+ *
* # Basic Example
- *
+ *
* var tip = Ext.create('Ext.tip.ToolTip', {
* target: 'clearButton',
* html: 'Press this button to clear the form'
* });
- *
+ *
* {@img Ext.tip.ToolTip/Ext.tip.ToolTip1.png Basic Ext.tip.ToolTip}
- *
+ *
* # Delegation
- *
+ *
* In addition to attaching a ToolTip to a single element, you can also use delegation to attach
* one ToolTip to many elements under a common parent. This is more efficient than creating many
* ToolTip instances. To do this, point the {@link #target} config to a common ancestor of all the
* elements, and then set the {@link #delegate} config to a CSS selector that will select all the
* appropriate sub-elements.
- *
+ *
* When using delegation, it is likely that you will want to programmatically change the content
* of the ToolTip based on each delegate element; you can do this by implementing a custom
* listener for the {@link #beforeshow} event. Example:
- *
+ *
* var store = Ext.create('Ext.data.ArrayStore', {
* fields: ['company', 'price', 'change'],
* data: [
* ['AT&T Inc.', 31.61, -0.48]
* ]
* });
- *
+ *
* var grid = Ext.create('Ext.grid.Panel', {
* title: 'Array Grid',
* store: store,
* width: 400,
* renderTo: Ext.getBody()
* });
- *
+ *
* grid.getView().on('render', function(view) {
* view.tip = Ext.create('Ext.tip.ToolTip', {
* // The overall target element.
* }
* });
* });
- *
+ *
* {@img Ext.tip.ToolTip/Ext.tip.ToolTip2.png Ext.tip.ToolTip with delegation}
- *
+ *
* # Alignment
- *
+ *
* The following configuration properties allow control over how the ToolTip is aligned relative to
* the target element and/or mouse pointer:
- *
+ *
* - {@link #anchor}
* - {@link #anchorToTarget}
* - {@link #anchorOffset}
* - {@link #trackMouse}
* - {@link #mouseOffset}
- *
+ *
* # Showing/Hiding
- *
+ *
* The following configuration properties allow control over how and when the ToolTip is automatically
* shown and hidden:
- *
+ *
* - {@link #autoHide}
* - {@link #showDelay}
* - {@link #hideDelay}
* - {@link #dismissDelay}
- *
+ *
* @docauthor Jason Johnston <jason@sencha.com>
*/
Ext.define('Ext.tip.ToolTip', {
alias: 'widget.tooltip',
alternateClassName: 'Ext.ToolTip',
/**
+ * @property {HTMLElement} triggerElement
* When a ToolTip is configured with the `{@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.core.Element or id to monitor
- * for mouseover events to trigger showing this ToolTip.
+ * @cfg {HTMLElement/Ext.Element/String} target
+ * The target element or string id to monitor for mouseover events to trigger
+ * showing this ToolTip.
*/
/**
- * @cfg {Boolean} autoHide True to automatically hide the tooltip after the
+ * @cfg {Boolean} [autoHide=true]
+ * 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`
+ * has expired if set. 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.
*/
showDelay: 500,
/**
- * @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the
- * target element but before the tooltip actually hides (defaults to 200).
+ * @cfg {Number} hideDelay
+ * Delay in milliseconds after the mouse exits the target element but before the tooltip actually hides.
* Set to 0 for the tooltip to hide immediately.
*/
hideDelay: 200,
/**
- * @cfg {Number} dismissDelay Delay in milliseconds before the tooltip
- * automatically hides (defaults to 5000). To disable automatic hiding, set
+ * @cfg {Number} dismissDelay
+ * Delay in milliseconds before the tooltip automatically hides. To disable automatic hiding, set
* dismissDelay = 0.
*/
dismissDelay: 5000,
/**
- * @cfg {Array} mouseOffset An XY offset from the mouse position where the
- * tooltip should be shown (defaults to [15,18]).
+ * @cfg {Number[]} [mouseOffset=[15,18]]
+ * An XY offset from the mouse position where the tooltip should be shown.
*/
/**
- * @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.
*/
trackMouse: false,
/**
- * @cfg {String} anchor If specified, indicates that the tip should be anchored to a
+ * @cfg {String} anchor
+ * If specified, indicates that the tip should be anchored to a
* particular side of the target element or mouse pointer ("top", "right", "bottom",
* or "left"), with an arrow pointing back at the target or mouse pointer. If
* {@link #constrainPosition} is enabled, this will be used as a preferred value
* only and may be flipped as needed.
*/
/**
- * @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.
+ * When `anchorToTarget` is true, use `{@link #defaultAlign}` to control tooltip alignment to the
+ * target element. When `anchorToTarget` is false, use `{@link #anchor}` instead to control alignment.
*/
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
+ * @cfg {Number} anchorOffset
+ * A numeric pixel value used to offset the default position of the anchor arrow. 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,
*
* 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.
- *
+ *
* See the delegate example in class documentation of {@link Ext.tip.ToolTip}.
*/
me.callParent(arguments);
zIndex = parseInt(me.el.getZIndex(), 10) || 0;
- me.anchorEl.setStyle('z-index', zIndex + 1).setVisibilityMode(Ext.core.Element.DISPLAY);
+ me.anchorEl.setStyle('z-index', zIndex + 1).setVisibilityMode(Ext.Element.DISPLAY);
},
/**
* Binds this ToolTip to the specified element. The tooltip will be displayed when the mouse moves over the element.
- * @param {Mixed} t The Element, HtmlElement, or ID of an element to bind to
+ * @param {String/HTMLElement/Ext.Element} t The Element, HtmlElement, or ID of an element to bind to
*/
setTarget: function(target) {
var me = this,
me.mun(tg, 'mouseout', me.onTargetOut, me);
me.mun(tg, 'mousemove', me.onMouseMove, me);
}
-
+
me.target = t;
if (t) {
-
+
me.mon(t, {
// TODO - investigate why IE6/7 seem to fire recursive resize in e.getXY
// breaking QuickTip#onTargetOver (EXTJSIV-1608)
if (!me.hidden && me.trackMouse) {
xy = me.getTargetXY();
if (me.constrainPosition) {
- xy = me.el.adjustForConstraints(xy, me.el.dom.parentNode);
+ xy = me.el.adjustForConstraints(xy, me.el.getScopeParent());
}
me.setPagePosition(xy);
}
me.targetCounter++;
var offsets = me.getOffsets(),
xy = (me.anchorToTarget && !me.trackMouse) ? me.el.getAlignToXY(me.anchorTarget, me.getAnchorAlign()) : me.targetXY,
- dw = Ext.core.Element.getViewWidth() - 5,
- dh = Ext.core.Element.getViewHeight() - 5,
+ dw = Ext.Element.getViewWidth() - 5,
+ dh = Ext.Element.getViewHeight() - 5,
de = document.documentElement,
bd = document.body,
scrollX = (de.scrollLeft || bd.scrollLeft || 0) + 5,
git.ithinksw.org / extjs.git / blobdiff