/**
* @class Ext.tip.ToolTip
* @extends Ext.tip.Tip
* A standard tooltip implementation for providing additional information when hovering over a target element.
* @xtype tooltip
* @constructor
* Create a new Tooltip
* @param {Object} config The configuration options
*/
Ext.define('Ext.tip.ToolTip', {
extend: 'Ext.tip.Tip',
alias: 'widget.tooltip',
/**
* 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 {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)
*/
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.
*/
hideDelay: 200,
/**
* @cfg {Number} dismissDelay Delay in milliseconds before the tooltip
* automatically hides (defaults to 5000). 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 {Boolean} trackMouse True to have the tooltip follow the mouse as it
* moves over the target element (defaults to false).
*/
trackMouse: false,
/**
* @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.
*/
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.
*/
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
* 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:
var myGrid = new Ext.grid.gridPanel(gridConfig);
myGrid.on('render', function(grid) {
var store = grid.getStore(); // Capture the Store.
var view = grid.getView(); // Capture the GridView.
myGrid.tip = new Ext.tip.ToolTip({
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.
beforeshow: function updateTipBody(tip) {
var rowIndex = view.findRowIndex(tip.triggerElement);
tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id;
}
}
});
});
*
*/
// private
targetCounter: 0,
quickShowInterval: 250,
// private
initComponent: function() {
var me = this;
Ext.tip.ToolTip.superclass.superclass.initComponent.call(me);
me.lastActive = new Date();
me.initTarget(me.target);
me.origAnchor = me.anchor;
},
// private
onRender: function(ct, position) {
var me = this;
Ext.tip.ToolTip.superclass.superclass.onRender.call(me, ct, position);
me.anchorCls = Ext.baseCSSPrefix + 'tip-anchor-' + me.getAnchorPosition();
me.anchorEl = me.el.createChild({
cls: Ext.baseCSSPrefix + 'tip-anchor ' + me.anchorCls
});
},
// private
afterRender: function() {
var me = this,
zIndex;
Ext.tip.ToolTip.superclass.superclass.afterRender.call(me);
zIndex = parseInt(me.el.getZIndex(), 10) || 0;
me.anchorEl.setStyle('z-index', zIndex + 1).setVisibilityMode(Ext.core.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
*/
initTarget: function(target) {
var me = this,
t = Ext.get(target),
tg;
if (t) {
if (me.target) {
tg = Ext.get(me.target);
me.mun(tg, 'mouseover', me.onTargetOver, me);
me.mun(tg, 'mouseout', me.onTargetOut, me);
me.mun(tg, 'mousemove', me.onMouseMove, me);
}
me.mon(t, {
mouseover: me.onTargetOver,
mouseout: me.onTargetOut,
mousemove: me.onMouseMove,
scope: me
});
me.target = t;
}
if (me.anchor) {
me.anchorTarget = me.target;
}
},
// private
onMouseMove: function(e) {
var me = this,
t = me.delegate ? e.getTarget(me.delegate) : me.triggerElement = true,
xy;
if (t) {
me.targetXY = e.getXY();
if (t === me.triggerElement) {
if (!me.hidden && me.trackMouse) {
xy = me.getTargetXY();
if (me.constrainPosition) {
xy = me.el.adjustForConstraints(xy, me.el.dom.parentNode);
}
this.setPagePosition(xy);
}
}
else {
me.hide();
me.lastActive = new Date(0);
me.onTargetOver(e);
}
}
else if (!me.closable && me.isVisible()) {
me.hide();
}
},
// private
getTargetXY: function() {
var me = this,
mouseOffset;
if (me.delegate) {
me.anchorTarget = me.triggerElement;
}
if (me.anchor) {
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,
de = document.documentElement,
bd = document.body,
scrollX = (de.scrollLeft || bd.scrollLeft || 0) + 5,
scrollY = (de.scrollTop || bd.scrollTop || 0) + 5,
axy = [xy[0] + offsets[0], xy[1] + offsets[1]],
sz = me.getSize(),
constrainPosition = me.constrainPosition;
me.anchorEl.removeCls(me.anchorCls);
if (me.targetCounter < 2 && constrainPosition) {
if (axy[0] < scrollX) {
if (me.anchorToTarget) {
me.defaultAlign = 'l-r';
if (me.mouseOffset) {
me.mouseOffset[0] *= -1;
}
}
me.anchor = 'left';
return me.getTargetXY();
}
if (axy[0] + sz.width > dw) {
if (me.anchorToTarget) {
me.defaultAlign = 'r-l';
if (me.mouseOffset) {
me.mouseOffset[0] *= -1;
}
}
me.anchor = 'right';
return me.getTargetXY();
}
if (axy[1] < scrollY) {
if (me.anchorToTarget) {
me.defaultAlign = 't-b';
if (me.mouseOffset) {
me.mouseOffset[1] *= -1;
}
}
me.anchor = 'top';
return me.getTargetXY();
}
if (axy[1] + sz.height > dh) {
if (me.anchorToTarget) {
me.defaultAlign = 'b-t';
if (me.mouseOffset) {
me.mouseOffset[1] *= -1;
}
}
me.anchor = 'bottom';
return me.getTargetXY();
}
}
me.anchorCls = Ext.baseCSSPrefix + 'tip-anchor-' + me.getAnchorPosition();
me.anchorEl.addCls(me.anchorCls);
me.targetCounter = 0;
return axy;
} else {
mouseOffset = me.getMouseOffset();
return (me.targetXY) ? [me.targetXY[0] + mouseOffset[0], me.targetXY[1] + mouseOffset[1]] : mouseOffset;
}
},
getMouseOffset: function() {
var me = this,
offset = me.anchor ? [0, 0] : [15, 18];
if (me.mouseOffset) {
offset[0] += me.mouseOffset[0];
offset[1] += me.mouseOffset[1];
}
return offset;
},
// private
getAnchorPosition: function() {
var me = this,
m;
if (me.anchor) {
me.tipAnchor = me.anchor.charAt(0);
} else {
m = me.defaultAlign.match(/^([a-z]+)-([a-z]+)(\?)?$/);
if (!m) {
throw 'AnchorTip.defaultAlign is invalid';
}
me.tipAnchor = m[1].charAt(0);
}
switch (me.tipAnchor) {
case 't':
return 'top';
case 'b':
return 'bottom';
case 'r':
return 'right';
}
return 'left';
},
// private
getAnchorAlign: function() {
switch (this.anchor) {
case 'top':
return 'tl-bl';
case 'left':
return 'tl-tr';
case 'right':
return 'tr-tl';
default:
return 'bl-tl';
}
},
// private
getOffsets: function() {
var me = this,
mouseOffset,
offsets,
ap = me.getAnchorPosition().charAt(0);
if (me.anchorToTarget && !me.trackMouse) {
switch (ap) {
case 't':
offsets = [0, 9];
break;
case 'b':
offsets = [0, -13];
break;
case 'r':
offsets = [ - 13, 0];
break;
default:
offsets = [9, 0];
break;
}
} else {
switch (ap) {
case 't':
offsets = [ - 15 - me.anchorOffset, 30];
break;
case 'b':
offsets = [ - 19 - me.anchorOffset, -13 - me.el.dom.offsetHeight];
break;
case 'r':
offsets = [ - 15 - me.el.dom.offsetWidth, -13 - me.anchorOffset];
break;
default:
offsets = [25, -13 - me.anchorOffset];
break;
}
}
mouseOffset = me.getMouseOffset();
offsets[0] += mouseOffset[0];
offsets[1] += mouseOffset[1];
return offsets;
},
// private
onTargetOver: function(e) {
var me = this,
t;
if (me.disabled || e.within(me.target.dom, true)) {
return;
}
t = e.getTarget(me.delegate);
if (t) {
me.triggerElement = t;
me.clearTimer('hide');
me.targetXY = e.getXY();
me.delayShow();
}
},
// private
delayShow: function() {
var me = this;
if (me.hidden && !me.showTimer) {
if (Ext.Date.getElapsed(me.lastActive) < me.quickShowInterval) {
me.show();
} else {
me.showTimer = Ext.defer(me.show, me.showDelay, me);
}
}
else if (!me.hidden && me.autoHide !== me) {
me.show();
}
},
// private
onTargetOut: function(e) {
var me = this;
if (me.disabled || e.within(me.target.dom, true)) {
return;
}
me.clearTimer('show');
if (me.autoHide !== false) {
me.delayHide();
}
},
// private
delayHide: function() {
var me = this;
if (!me.hidden && !me.hideTimer) {
me.hideTimer = Ext.defer(me.hide, me.hideDelay, me);
}
},
/**
* Hides this tooltip if visible.
*/
hide: function() {
var me = this;
me.clearTimer('dismiss');
me.lastActive = new Date();
if (me.anchorEl) {
me.anchorEl.hide();
}
Ext.tip.ToolTip.superclass.superclass.hide.call(me);
delete me.triggerElement;
},
/**
* Shows this tooltip at the current event target XY position.
*/
show: function() {
var me = this;
if (me.anchor) {
// pre-show it off screen so that the el will have dimensions
// for positioning calcs when getting xy next
me.showAt([ -1000, -1000]);
me.anchor = me.origAnchor;
}
me.showAt(me.getTargetXY());
if (me.anchor) {
me.syncAnchor();
me.anchorEl.show();
} else {
me.anchorEl.hide();
}
},
// inherit docs
showAt: function(xy) {
var me = this;
me.lastActive = new Date();
me.clearTimers();
Ext.tip.Tip.superclass.show.call(me);
// Show may have been vetoed.
if (me.isVisible()) {
me.setPagePosition(xy[0], xy[1]);
me.toFront();
}
if (me.dismissDelay && me.autoHide !== false) {
me.dismissTimer = Ext.defer(me.hide, me.dismissDelay, me);
}
if (me.anchor) {
me.syncAnchor();
if (!me.anchorEl.isVisible()) {
me.anchorEl.show();
}
} else {
me.anchorEl.hide();
}
},
// private
syncAnchor: function() {
var me = this,
anchorPos,
targetPos,
offset;
switch (me.tipAnchor.charAt(0)) {
case 't':
anchorPos = 'b';
targetPos = 'tl';
offset = [20 + me.anchorOffset, 1];
break;
case 'r':
anchorPos = 'l';
targetPos = 'tr';
offset = [ - 1, 12 + me.anchorOffset];
break;
case 'b':
anchorPos = 't';
targetPos = 'bl';
offset = [20 + me.anchorOffset, -1];
break;
default:
anchorPos = 'r';
targetPos = 'tl';
offset = [1, 12 + me.anchorOffset];
break;
}
me.anchorEl.alignTo(me.el, anchorPos + '-' + targetPos, offset);
},
// private
setPagePosition: function(x, y) {
var me = this;
Ext.tip.ToolTip.superclass.superclass.setPagePosition.call(me, x, y);
if (me.anchor) {
me.syncAnchor();
}
},
// private
clearTimer: function(name) {
name = name + 'Timer';
clearTimeout(this[name]);
delete this[name];
},
// private
clearTimers: function() {
var me = this;
me.clearTimer('show');
me.clearTimer('dismiss');
me.clearTimer('hide');
},
// private
onShow: function() {
var me = this;
Ext.tip.ToolTip.superclass.superclass.onShow.call(me);
me.mon(Ext.getDoc(), 'mousedown', me.onDocMouseDown, me);
},
// private
onHide: function() {
var me = this;
Ext.tip.ToolTip.superclass.superclass.onHide.call(me);
me.mun(Ext.getDoc(), 'mousedown', me.onDocMouseDown, me);
},
// private
onDocMouseDown: function(e) {
var me = this;
if (me.autoHide !== true && !me.closable && !e.within(me.el.dom)) {
me.disable();
Ext.defer(me.doEnable, 100, me);
}
},
// private
doEnable: function() {
if (!this.isDestroyed) {
this.enable();
}
},
// private
onDisable: function() {
this.clearTimers();
this.hide();
},
beforeDestroy: function() {
var me = this;
me.clearTimers();
Ext.destroy(me.anchorEl);
delete me.anchorEl;
delete me.target;
delete me.anchorTarget;
delete me.triggerElement;
Ext.tip.ToolTip.superclass.superclass.beforeDestroy.call(me);
},
// private
onDestroy: function() {
Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
Ext.tip.ToolTip.superclass.superclass.onDestroy.call(this);
}
});