3 * Copyright(c) 2006-2009 Ext JS, LLC
5 * http://www.extjs.com/license
10 * A standard tooltip implementation for providing additional information when hovering over a target element.
\r
13 * Create a new Tooltip
\r
14 * @param {Object} config The configuration options
\r
16 Ext.ToolTip = Ext.extend(Ext.Tip, {
\r
18 * When a Tooltip is configured with the <code>{@link #delegate}</code>
\r
19 * option to cause selected child elements of the <code>{@link #target}</code>
\r
20 * Element to each trigger a seperate show event, this property is set to
\r
21 * the DOM element which triggered the show.
\r
23 * @property triggerElement
\r
26 * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to monitor
\r
27 * for mouseover events to trigger showing this ToolTip.
\r
30 * @cfg {Boolean} autoHide True to automatically hide the tooltip after the
\r
31 * mouse exits the target element or after the <code>{@link #dismissDelay}</code>
\r
32 * has expired if set (defaults to true). If <code>{@link closable} = true</code>
\r
33 * a close tool button will be rendered into the tooltip header.
\r
36 * @cfg {Number} showDelay Delay in milliseconds before the tooltip displays
\r
37 * after the mouse enters the target element (defaults to 500)
\r
41 * @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the
\r
42 * target element but before the tooltip actually hides (defaults to 200).
\r
43 * Set to 0 for the tooltip to hide immediately.
\r
47 * @cfg {Number} dismissDelay Delay in milliseconds before the tooltip
\r
48 * automatically hides (defaults to 5000). To disable automatic hiding, set
\r
51 dismissDelay : 5000,
\r
53 * @cfg {Array} mouseOffset An XY offset from the mouse position where the
\r
54 * tooltip should be shown (defaults to [15,18]).
\r
57 * @cfg {Boolean} trackMouse True to have the tooltip follow the mouse as it
\r
58 * moves over the target element (defaults to false).
\r
62 * @cfg {Boolean} anchorToTarget True to anchor the tooltip to the target
\r
63 * element, false to anchor it relative to the mouse coordinates (defaults
\r
64 * to true). When <code>anchorToTarget</code> is true, use
\r
65 * <code>{@link #defaultAlign}</code> to control tooltip alignment to the
\r
66 * target element. When <code>anchorToTarget</code> is false, use
\r
67 * <code>{@link #anchorPosition}</code> instead to control alignment.
\r
69 anchorToTarget : true,
\r
71 * @cfg {Number} anchorOffset A numeric pixel value used to offset the
\r
72 * default position of the anchor arrow (defaults to 0). When the anchor
\r
73 * position is on the top or bottom of the tooltip, <code>anchorOffset</code>
\r
74 * will be used as a horizontal offset. Likewise, when the anchor position
\r
75 * is on the left or right side, <code>anchorOffset</code> will be used as
\r
76 * a vertical offset.
\r
80 * @cfg {String} delegate <p>Optional. A {@link Ext.DomQuery DomQuery}
\r
81 * selector which allows selection of individual elements within the
\r
82 * <code>{@link #target}</code> element to trigger showing and hiding the
\r
83 * ToolTip as the mouse moves within the target.</p>
\r
84 * <p>When specified, the child element of the target which caused a show
\r
85 * event is placed into the <code>{@link #triggerElement}</code> property
\r
86 * before the ToolTip is shown.</p>
\r
87 * <p>This may be useful when a Component has regular, repeating elements
\r
88 * in it, each of which need a Tooltip which contains information specific
\r
89 * to that element. For example:</p><pre><code>
\r
90 var myGrid = new Ext.grid.gridPanel(gridConfig);
\r
91 myGrid.on('render', function(grid) {
\r
92 var store = grid.getStore(); // Capture the Store.
\r
93 var view = grid.getView(); // Capture the GridView.
\r
94 myGrid.tip = new Ext.ToolTip({
\r
95 target: view.mainBody, // The overall target element.
\r
96 delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.
\r
97 trackMouse: true, // Moving within the row should not hide the tip.
\r
98 renderTo: document.body, // Render immediately so that tip.body can be
\r
99 // referenced prior to the first show.
\r
100 listeners: { // Change content dynamically depending on which element
\r
101 // triggered the show.
\r
102 beforeshow: function updateTipBody(tip) {
\r
103 var rowIndex = view.findRowIndex(tip.triggerElement);
\r
104 tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id;
\r
115 constrainPosition : false,
\r
118 initComponent : function(){
\r
119 Ext.ToolTip.superclass.initComponent.call(this);
\r
120 this.lastActive = new Date();
\r
121 this.initTarget(this.target);
\r
122 this.origAnchor = this.anchor;
\r
126 onRender : function(ct, position){
\r
127 Ext.ToolTip.superclass.onRender.call(this, ct, position);
\r
128 this.anchorCls = 'x-tip-anchor-' + this.getAnchorPosition();
\r
129 this.anchorEl = this.el.createChild({
\r
130 cls: 'x-tip-anchor ' + this.anchorCls
\r
135 afterRender : function(){
\r
136 Ext.ToolTip.superclass.afterRender.call(this);
\r
137 this.anchorEl.setStyle('z-index', this.el.getZIndex() + 1);
\r
141 * Binds this ToolTip to the specified element. The tooltip will be displayed when the mouse moves over the element.
\r
142 * @param {Mixed} t The Element, HtmlElement, or ID of an element to bind to
\r
144 initTarget : function(target){
\r
146 if((t = Ext.get(target))){
\r
148 var tg = Ext.get(this.target);
\r
149 this.mun(tg, 'mouseover', this.onTargetOver, this);
\r
150 this.mun(tg, 'mouseout', this.onTargetOut, this);
\r
151 this.mun(tg, 'mousemove', this.onMouseMove, this);
\r
154 mouseover: this.onTargetOver,
\r
155 mouseout: this.onTargetOut,
\r
156 mousemove: this.onMouseMove,
\r
162 this.anchorTarget = this.target;
\r
167 onMouseMove : function(e){
\r
168 var t = this.delegate ? e.getTarget(this.delegate) : this.triggerElement = true;
\r
170 this.targetXY = e.getXY();
\r
171 if (t === this.triggerElement) {
\r
172 if(!this.hidden && this.trackMouse){
\r
173 this.setPagePosition(this.getTargetXY());
\r
177 this.lastActive = new Date(0);
\r
178 this.onTargetOver(e);
\r
180 } else if (!this.closable && this.isVisible()) {
\r
186 getTargetXY : function(){
\r
188 this.anchorTarget = this.triggerElement;
\r
191 this.targetCounter++;
\r
192 var offsets = this.getOffsets();
\r
193 var xy = (this.anchorToTarget && !this.trackMouse) ?
\r
194 this.el.getAlignToXY(this.anchorTarget, this.getAnchorAlign()) :
\r
197 var dw = Ext.lib.Dom.getViewWidth()-5;
\r
198 var dh = Ext.lib.Dom.getViewHeight()-5;
\r
199 var scrollX = (document.documentElement.scrollLeft || document.body.scrollLeft || 0)+5;
\r
200 var scrollY = (document.documentElement.scrollTop || document.body.scrollTop || 0)+5;
\r
202 var axy = [xy[0] + offsets[0], xy[1] + offsets[1]];
\r
203 var sz = this.getSize();
\r
204 this.anchorEl.removeClass(this.anchorCls);
\r
206 if(this.targetCounter < 2){
\r
207 if(axy[0] < scrollX){
\r
208 if(this.anchorToTarget){
\r
209 this.defaultAlign = 'l-r';
\r
210 if(this.mouseOffset){this.mouseOffset[0] *= -1;}
\r
212 this.anchor = 'left';
\r
213 return this.getTargetXY();
\r
215 if(axy[0]+sz.width > dw){
\r
216 if(this.anchorToTarget){
\r
217 this.defaultAlign = 'r-l';
\r
218 if(this.mouseOffset){this.mouseOffset[0] *= -1;}
\r
220 this.anchor = 'right';
\r
221 return this.getTargetXY();
\r
223 if(axy[1] < scrollY){
\r
224 if(this.anchorToTarget){
\r
225 this.defaultAlign = 't-b';
\r
226 if(this.mouseOffset){this.mouseOffset[1] *= -1;}
\r
228 this.anchor = 'top';
\r
229 return this.getTargetXY();
\r
231 if(axy[1]+sz.height > dh){
\r
232 if(this.anchorToTarget){
\r
233 this.defaultAlign = 'b-t';
\r
234 if(this.mouseOffset){this.mouseOffset[1] *= -1;}
\r
236 this.anchor = 'bottom';
\r
237 return this.getTargetXY();
\r
241 this.anchorCls = 'x-tip-anchor-'+this.getAnchorPosition();
\r
242 this.anchorEl.addClass(this.anchorCls);
\r
243 this.targetCounter = 0;
\r
246 var mouseOffset = this.getMouseOffset();
\r
247 return [this.targetXY[0]+mouseOffset[0], this.targetXY[1]+mouseOffset[1]];
\r
251 getMouseOffset : function(){
\r
252 var offset = this.anchor ? [0,0] : [15,18];
\r
253 if(this.mouseOffset){
\r
254 offset[0] += this.mouseOffset[0];
\r
255 offset[1] += this.mouseOffset[1];
\r
261 getAnchorPosition : function(){
\r
263 this.tipAnchor = this.anchor.charAt(0);
\r
265 var m = this.defaultAlign.match(/^([a-z]+)-([a-z]+)(\?)?$/);
\r
267 throw 'AnchorTip.defaultAlign is invalid';
\r
269 this.tipAnchor = m[1].charAt(0);
\r
272 switch(this.tipAnchor){
\r
273 case 't': return 'top';
\r
274 case 'b': return 'bottom';
\r
275 case 'r': return 'right';
\r
281 getAnchorAlign : function(){
\r
282 switch(this.anchor){
\r
283 case 'top' : return 'tl-bl';
\r
284 case 'left' : return 'tl-tr';
\r
285 case 'right': return 'tr-tl';
\r
286 default : return 'bl-tl';
\r
291 getOffsets : function(){
\r
292 var offsets, ap = this.getAnchorPosition().charAt(0);
\r
293 if(this.anchorToTarget && !this.trackMouse){
\r
299 offsets = [0, -13];
\r
302 offsets = [-13, 0];
\r
311 offsets = [-15-this.anchorOffset, 30];
\r
314 offsets = [-19-this.anchorOffset, -13-this.el.dom.offsetHeight];
\r
317 offsets = [-15-this.el.dom.offsetWidth, -13-this.anchorOffset];
\r
320 offsets = [25, -13-this.anchorOffset];
\r
324 var mouseOffset = this.getMouseOffset();
\r
325 offsets[0] += mouseOffset[0];
\r
326 offsets[1] += mouseOffset[1];
\r
332 onTargetOver : function(e){
\r
333 if(this.disabled || e.within(this.target.dom, true)){
\r
336 var t = e.getTarget(this.delegate);
\r
338 this.triggerElement = t;
\r
339 this.clearTimer('hide');
\r
340 this.targetXY = e.getXY();
\r
346 delayShow : function(){
\r
347 if(this.hidden && !this.showTimer){
\r
348 if(this.lastActive.getElapsed() < this.quickShowInterval){
\r
351 this.showTimer = this.show.defer(this.showDelay, this);
\r
353 }else if(!this.hidden && this.autoHide !== false){
\r
359 onTargetOut : function(e){
\r
360 if(this.disabled || e.within(this.target.dom, true)){
\r
363 this.clearTimer('show');
\r
364 if(this.autoHide !== false){
\r
370 delayHide : function(){
\r
371 if(!this.hidden && !this.hideTimer){
\r
372 this.hideTimer = this.hide.defer(this.hideDelay, this);
\r
377 * Hides this tooltip if visible.
\r
380 this.clearTimer('dismiss');
\r
381 this.lastActive = new Date();
\r
383 this.anchorEl.hide();
\r
385 Ext.ToolTip.superclass.hide.call(this);
\r
386 delete this.triggerElement;
\r
390 * Shows this tooltip at the current event target XY position.
\r
394 // pre-show it off screen so that the el will have dimensions
\r
395 // for positioning calcs when getting xy next
\r
396 this.showAt([-1000,-1000]);
\r
397 this.origConstrainPosition = this.constrainPosition;
\r
398 this.constrainPosition = false;
\r
399 this.anchor = this.origAnchor;
\r
401 this.showAt(this.getTargetXY());
\r
405 this.anchorEl.show();
\r
406 this.constrainPosition = this.origConstrainPosition;
\r
408 this.anchorEl.hide();
\r
413 showAt : function(xy){
\r
414 this.lastActive = new Date();
\r
415 this.clearTimers();
\r
416 Ext.ToolTip.superclass.showAt.call(this, xy);
\r
417 if(this.dismissDelay && this.autoHide !== false){
\r
418 this.dismissTimer = this.hide.defer(this.dismissDelay, this);
\r
420 if(this.anchor && !this.anchorEl.isVisible()){
\r
422 this.anchorEl.show();
\r
427 syncAnchor : function(){
\r
428 var anchorPos, targetPos, offset;
\r
429 switch(this.tipAnchor.charAt(0)){
\r
433 offset = [20+this.anchorOffset, 2];
\r
438 offset = [-2, 11+this.anchorOffset];
\r
443 offset = [20+this.anchorOffset, -2];
\r
448 offset = [2, 11+this.anchorOffset];
\r
451 this.anchorEl.alignTo(this.el, anchorPos+'-'+targetPos, offset);
\r
455 setPagePosition : function(x, y){
\r
456 Ext.ToolTip.superclass.setPagePosition.call(this, x, y);
\r
463 clearTimer : function(name){
\r
464 name = name + 'Timer';
\r
465 clearTimeout(this[name]);
\r
470 clearTimers : function(){
\r
471 this.clearTimer('show');
\r
472 this.clearTimer('dismiss');
\r
473 this.clearTimer('hide');
\r
477 onShow : function(){
\r
478 Ext.ToolTip.superclass.onShow.call(this);
\r
479 Ext.getDoc().on('mousedown', this.onDocMouseDown, this);
\r
483 onHide : function(){
\r
484 Ext.ToolTip.superclass.onHide.call(this);
\r
485 Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
\r
489 onDocMouseDown : function(e){
\r
490 if(this.autoHide !== true && !this.closable && !e.within(this.el.dom)){
\r
492 this.enable.defer(100, this);
\r
497 onDisable : function(){
\r
498 this.clearTimers();
\r
503 adjustPosition : function(x, y){
\r
504 if(this.contstrainPosition){
\r
505 var ay = this.targetXY[1], h = this.getSize().height;
\r
506 if(y <= ay && (y+h) >= ay){
\r
510 return {x : x, y: y};
\r
514 onDestroy : function(){
\r
515 Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
\r
516 Ext.ToolTip.superclass.onDestroy.call(this);
\r
520 Ext.reg('tooltip', Ext.ToolTip);