208 lines
5.9 KiB
JavaScript
208 lines
5.9 KiB
JavaScript
|
|
/*
|
||
|
|
* Ext JS Library 2.3.0
|
||
|
|
* Copyright(c) 2006-2009, Ext JS, LLC.
|
||
|
|
* licensing@extjs.com
|
||
|
|
*
|
||
|
|
* http://extjs.com/license
|
||
|
|
*/
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @class Ext.ToolTip
|
||
|
|
* @extends Ext.Tip
|
||
|
|
* A standard tooltip implementation for providing additional information when hovering over a target element.
|
||
|
|
* @constructor
|
||
|
|
* Create a new Tooltip
|
||
|
|
* @param {Object} config The configuration options
|
||
|
|
*/
|
||
|
|
Ext.ToolTip = Ext.extend(Ext.Tip, {
|
||
|
|
/**
|
||
|
|
* @cfg {Mixed} target The target HTMLElement, Ext.Element or id to associate with 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]).
|
||
|
|
*/
|
||
|
|
mouseOffset: [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,
|
||
|
|
constrainPosition: true,
|
||
|
|
|
||
|
|
// private
|
||
|
|
initComponent: function(){
|
||
|
|
Ext.ToolTip.superclass.initComponent.call(this);
|
||
|
|
this.lastActive = new Date();
|
||
|
|
this.initTarget();
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
initTarget : function(){
|
||
|
|
if(this.target){
|
||
|
|
this.target = Ext.get(this.target);
|
||
|
|
this.target.on('mouseover', this.onTargetOver, this);
|
||
|
|
this.target.on('mouseout', this.onTargetOut, this);
|
||
|
|
this.target.on('mousemove', this.onMouseMove, this);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
onMouseMove : function(e){
|
||
|
|
this.targetXY = e.getXY();
|
||
|
|
if(!this.hidden && this.trackMouse){
|
||
|
|
this.setPagePosition(this.getTargetXY());
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
getTargetXY : function(){
|
||
|
|
return [this.targetXY[0]+this.mouseOffset[0], this.targetXY[1]+this.mouseOffset[1]];
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
onTargetOver : function(e){
|
||
|
|
if(this.disabled || e.within(this.target.dom, true)){
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.clearTimer('hide');
|
||
|
|
this.targetXY = e.getXY();
|
||
|
|
this.delayShow();
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
delayShow : function(){
|
||
|
|
if(this.hidden && !this.showTimer){
|
||
|
|
if(this.lastActive.getElapsed() < this.quickShowInterval){
|
||
|
|
this.show();
|
||
|
|
}else{
|
||
|
|
this.showTimer = this.show.defer(this.showDelay, this);
|
||
|
|
}
|
||
|
|
}else if(!this.hidden && this.autoHide !== false){
|
||
|
|
this.show();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
onTargetOut : function(e){
|
||
|
|
if(this.disabled || e.within(this.target.dom, true)){
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.clearTimer('show');
|
||
|
|
if(this.autoHide !== false){
|
||
|
|
this.delayHide();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
delayHide : function(){
|
||
|
|
if(!this.hidden && !this.hideTimer){
|
||
|
|
this.hideTimer = this.hide.defer(this.hideDelay, this);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Hides this tooltip if visible.
|
||
|
|
*/
|
||
|
|
hide: function(){
|
||
|
|
this.clearTimer('dismiss');
|
||
|
|
this.lastActive = new Date();
|
||
|
|
Ext.ToolTip.superclass.hide.call(this);
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Shows this tooltip at the current event target XY position.
|
||
|
|
*/
|
||
|
|
show : function(){
|
||
|
|
this.showAt(this.getTargetXY());
|
||
|
|
},
|
||
|
|
|
||
|
|
// inherit docs
|
||
|
|
showAt : function(xy){
|
||
|
|
this.lastActive = new Date();
|
||
|
|
this.clearTimers();
|
||
|
|
Ext.ToolTip.superclass.showAt.call(this, xy);
|
||
|
|
if(this.dismissDelay && this.autoHide !== false){
|
||
|
|
this.dismissTimer = this.hide.defer(this.dismissDelay, this);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
clearTimer : function(name){
|
||
|
|
name = name + 'Timer';
|
||
|
|
clearTimeout(this[name]);
|
||
|
|
delete this[name];
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
clearTimers : function(){
|
||
|
|
this.clearTimer('show');
|
||
|
|
this.clearTimer('dismiss');
|
||
|
|
this.clearTimer('hide');
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
onShow : function(){
|
||
|
|
Ext.ToolTip.superclass.onShow.call(this);
|
||
|
|
Ext.getDoc().on('mousedown', this.onDocMouseDown, this);
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
onHide : function(){
|
||
|
|
Ext.ToolTip.superclass.onHide.call(this);
|
||
|
|
Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
onDocMouseDown : function(e){
|
||
|
|
if(this.autoHide !== true && !e.within(this.el.dom)){
|
||
|
|
this.disable();
|
||
|
|
this.enable.defer(100, this);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
onDisable : function(){
|
||
|
|
this.clearTimers();
|
||
|
|
this.hide();
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
adjustPosition : function(x, y){
|
||
|
|
// keep the position from being under the mouse
|
||
|
|
var ay = this.targetXY[1], h = this.getSize().height;
|
||
|
|
if(this.constrainPosition && y <= ay && (y+h) >= ay){
|
||
|
|
y = ay-h-5;
|
||
|
|
}
|
||
|
|
return {x : x, y: y};
|
||
|
|
},
|
||
|
|
|
||
|
|
// private
|
||
|
|
onDestroy : function(){
|
||
|
|
Ext.ToolTip.superclass.onDestroy.call(this);
|
||
|
|
Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
|
||
|
|
if(this.target){
|
||
|
|
this.target.un('mouseover', this.onTargetOver, this);
|
||
|
|
this.target.un('mouseout', this.onTargetOut, this);
|
||
|
|
this.target.un('mousemove', this.onMouseMove, this);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|