3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
11 * This is the base class for {@link Ext.QuickTip} and {@link Ext.Tooltip} that provides the basic layout and
12 * positioning that all tip-based classes require. This class can be used directly for simple, statically-positioned
13 * tips that are displayed programmatically, or it can be extended to provide custom tip implementations.
16 * @param {Object} config The configuration options
18 Ext.Tip = Ext.extend(Ext.Panel, {
20 * @cfg {Boolean} closable True to render a close tool button into the tooltip header (defaults to false).
24 * Width in pixels of the tip (defaults to auto). Width will be ignored if it exceeds the bounds of
25 * {@link #minWidth} or {@link #maxWidth}. The maximum supported value is 500.
28 * @cfg {Number} minWidth The minimum width of the tip in pixels (defaults to 40).
32 * @cfg {Number} maxWidth The maximum width of the tip in pixels (defaults to 300). The maximum supported value is 500.
36 * @cfg {Boolean/String} shadow True or "sides" for the default effect, "frame" for 4-way shadow, and "drop"
37 * for bottom-right shadow (defaults to "sides").
41 * @cfg {String} defaultAlign <b>Experimental</b>. The default {@link Ext.Element#alignTo} anchor position value
42 * for this tip relative to its element of origin (defaults to "tl-bl?").
44 defaultAlign : "tl-bl?",
46 quickShowInterval : 250,
48 // private panel overrides
52 floating:{shadow:true,shim:true,useDisplay:true,constrain:false},
58 initComponent : function(){
59 Ext.Tip.superclass.initComponent.call(this);
60 if(this.closable && !this.title){
61 this.elements += ',header';
66 afterRender : function(){
67 Ext.Tip.superclass.afterRender.call(this);
71 handler: this[this.closeAction],
78 * Shows this tip at the specified XY position. Example usage:
80 // Show the tip at x:50 and y:100
83 * @param {Array} xy An array containing the x and y coordinates
85 showAt : function(xy){
86 Ext.Tip.superclass.show.call(this);
87 if(this.measureWidth !== false && (!this.initialConfig || typeof this.initialConfig.width != 'number')){
90 if(this.constrainPosition){
91 xy = this.el.adjustForConstraints(xy);
93 this.setPagePosition(xy[0], xy[1]);
97 doAutoWidth : function(adjust){
99 var bw = this.body.getTextWidth();
101 bw = Math.max(bw, this.header.child('span').getTextWidth(this.title));
103 bw += this.getFrameWidth() + (this.closable ? 20 : 0) + this.body.getPadding("lr") + adjust;
104 this.setWidth(bw.constrain(this.minWidth, this.maxWidth));
106 // IE7 repaint bug on initial show
107 if(Ext.isIE7 && !this.repainted){
109 this.repainted = true;
114 * <b>Experimental</b>. Shows this tip at a position relative to another element using a standard {@link Ext.Element#alignTo}
115 * anchor position value. Example usage:
117 // Show the tip at the default position ('tl-br?')
120 // Show the tip's top-left corner anchored to the element's top-right corner
121 tip.showBy('my-el', 'tl-tr');
123 * @param {Mixed} el An HTMLElement, Ext.Element or string id of the target element to align to
124 * @param {String} position (optional) A valid {@link Ext.Element#alignTo} anchor position (defaults to 'tl-br?' or
125 * {@link #defaultAlign} if specified).
127 showBy : function(el, pos){
129 this.render(Ext.getBody());
131 this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign));
134 initDraggable : function(){
135 this.dd = new Ext.Tip.DD(this, typeof this.draggable == 'boolean' ? null : this.draggable);
136 this.header.addClass('x-tip-draggable');
140 Ext.reg('tip', Ext.Tip);
142 // private - custom Tip DD implementation
143 Ext.Tip.DD = function(tip, config){
144 Ext.apply(this, config);
146 Ext.Tip.DD.superclass.constructor.call(this, tip.el.id, 'WindowDD-'+tip.id);
147 this.setHandleElId(tip.header.id);
151 Ext.extend(Ext.Tip.DD, Ext.dd.DD, {
154 headerOffsets:[100, 25],
155 startDrag : function(){
156 this.tip.el.disableShadow();
158 endDrag : function(e){
159 this.tip.el.enableShadow(true);
164 * A standard tooltip implementation for providing additional information when hovering over a target element.
167 * Create a new Tooltip
168 * @param {Object} config The configuration options
170 Ext.ToolTip = Ext.extend(Ext.Tip, {
172 * When a Tooltip is configured with the <code>{@link #delegate}</code>
173 * option to cause selected child elements of the <code>{@link #target}</code>
174 * Element to each trigger a seperate show event, this property is set to
175 * the DOM element which triggered the show.
177 * @property triggerElement
180 * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to monitor
181 * for mouseover events to trigger showing this ToolTip.
184 * @cfg {Boolean} autoHide True to automatically hide the tooltip after the
185 * mouse exits the target element or after the <code>{@link #dismissDelay}</code>
186 * has expired if set (defaults to true). If <code>{@link closable} = true</code>
187 * a close tool button will be rendered into the tooltip header.
190 * @cfg {Number} showDelay Delay in milliseconds before the tooltip displays
191 * after the mouse enters the target element (defaults to 500)
195 * @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the
196 * target element but before the tooltip actually hides (defaults to 200).
197 * Set to 0 for the tooltip to hide immediately.
201 * @cfg {Number} dismissDelay Delay in milliseconds before the tooltip
202 * automatically hides (defaults to 5000). To disable automatic hiding, set
207 * @cfg {Array} mouseOffset An XY offset from the mouse position where the
208 * tooltip should be shown (defaults to [15,18]).
211 * @cfg {Boolean} trackMouse True to have the tooltip follow the mouse as it
212 * moves over the target element (defaults to false).
216 * @cfg {Boolean} anchorToTarget True to anchor the tooltip to the target
217 * element, false to anchor it relative to the mouse coordinates (defaults
218 * to true). When <code>anchorToTarget</code> is true, use
219 * <code>{@link #defaultAlign}</code> to control tooltip alignment to the
220 * target element. When <code>anchorToTarget</code> is false, use
221 * <code>{@link #anchorPosition}</code> instead to control alignment.
223 anchorToTarget : true,
225 * @cfg {Number} anchorOffset A numeric pixel value used to offset the
226 * default position of the anchor arrow (defaults to 0). When the anchor
227 * position is on the top or bottom of the tooltip, <code>anchorOffset</code>
228 * will be used as a horizontal offset. Likewise, when the anchor position
229 * is on the left or right side, <code>anchorOffset</code> will be used as
234 * @cfg {String} delegate <p>Optional. A {@link Ext.DomQuery DomQuery}
235 * selector which allows selection of individual elements within the
236 * <code>{@link #target}</code> element to trigger showing and hiding the
237 * ToolTip as the mouse moves within the target.</p>
238 * <p>When specified, the child element of the target which caused a show
239 * event is placed into the <code>{@link #triggerElement}</code> property
240 * before the ToolTip is shown.</p>
241 * <p>This may be useful when a Component has regular, repeating elements
242 * in it, each of which need a Tooltip which contains information specific
243 * to that element. For example:</p><pre><code>
244 var myGrid = new Ext.grid.gridPanel(gridConfig);
245 myGrid.on('render', function(grid) {
246 var store = grid.getStore(); // Capture the Store.
247 var view = grid.getView(); // Capture the GridView.
248 myGrid.tip = new Ext.ToolTip({
249 target: view.mainBody, // The overall target element.
250 delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.
251 trackMouse: true, // Moving within the row should not hide the tip.
252 renderTo: document.body, // Render immediately so that tip.body can be
253 // referenced prior to the first show.
254 listeners: { // Change content dynamically depending on which element
255 // triggered the show.
256 beforeshow: function updateTipBody(tip) {
257 var rowIndex = view.findRowIndex(tip.triggerElement);
258 tip.body.dom.innerHTML = 'Over Record ID ' + store.getAt(rowIndex).id;
269 constrainPosition : false,
272 initComponent : function(){
273 Ext.ToolTip.superclass.initComponent.call(this);
274 this.lastActive = new Date();
275 this.initTarget(this.target);
276 this.origAnchor = this.anchor;
280 onRender : function(ct, position){
281 Ext.ToolTip.superclass.onRender.call(this, ct, position);
282 this.anchorCls = 'x-tip-anchor-' + this.getAnchorPosition();
283 this.anchorEl = this.el.createChild({
284 cls: 'x-tip-anchor ' + this.anchorCls
289 afterRender : function(){
290 Ext.ToolTip.superclass.afterRender.call(this);
291 this.anchorEl.setStyle('z-index', this.el.getZIndex() + 1);
295 * Binds this ToolTip to the specified element. The tooltip will be displayed when the mouse moves over the element.
296 * @param {Mixed} t The Element, HtmlElement, or ID of an element to bind to
298 initTarget : function(target){
300 if((t = Ext.get(target))){
302 var tg = Ext.get(this.target);
303 this.mun(tg, 'mouseover', this.onTargetOver, this);
304 this.mun(tg, 'mouseout', this.onTargetOut, this);
305 this.mun(tg, 'mousemove', this.onMouseMove, this);
308 mouseover: this.onTargetOver,
309 mouseout: this.onTargetOut,
310 mousemove: this.onMouseMove,
316 this.anchorTarget = this.target;
321 onMouseMove : function(e){
322 var t = this.delegate ? e.getTarget(this.delegate) : this.triggerElement = true;
324 this.targetXY = e.getXY();
325 if (t === this.triggerElement) {
326 if(!this.hidden && this.trackMouse){
327 this.setPagePosition(this.getTargetXY());
331 this.lastActive = new Date(0);
332 this.onTargetOver(e);
334 } else if (!this.closable && this.isVisible()) {
340 getTargetXY : function(){
342 this.anchorTarget = this.triggerElement;
345 this.targetCounter++;
346 var offsets = this.getOffsets(),
347 xy = (this.anchorToTarget && !this.trackMouse) ? this.el.getAlignToXY(this.anchorTarget, this.getAnchorAlign()) : this.targetXY,
348 dw = Ext.lib.Dom.getViewWidth() - 5,
349 dh = Ext.lib.Dom.getViewHeight() - 5,
350 de = document.documentElement,
352 scrollX = (de.scrollLeft || bd.scrollLeft || 0) + 5,
353 scrollY = (de.scrollTop || bd.scrollTop || 0) + 5,
354 axy = [xy[0] + offsets[0], xy[1] + offsets[1]],
357 this.anchorEl.removeClass(this.anchorCls);
359 if(this.targetCounter < 2){
360 if(axy[0] < scrollX){
361 if(this.anchorToTarget){
362 this.defaultAlign = 'l-r';
363 if(this.mouseOffset){this.mouseOffset[0] *= -1;}
365 this.anchor = 'left';
366 return this.getTargetXY();
368 if(axy[0]+sz.width > dw){
369 if(this.anchorToTarget){
370 this.defaultAlign = 'r-l';
371 if(this.mouseOffset){this.mouseOffset[0] *= -1;}
373 this.anchor = 'right';
374 return this.getTargetXY();
376 if(axy[1] < scrollY){
377 if(this.anchorToTarget){
378 this.defaultAlign = 't-b';
379 if(this.mouseOffset){this.mouseOffset[1] *= -1;}
382 return this.getTargetXY();
384 if(axy[1]+sz.height > dh){
385 if(this.anchorToTarget){
386 this.defaultAlign = 'b-t';
387 if(this.mouseOffset){this.mouseOffset[1] *= -1;}
389 this.anchor = 'bottom';
390 return this.getTargetXY();
394 this.anchorCls = 'x-tip-anchor-'+this.getAnchorPosition();
395 this.anchorEl.addClass(this.anchorCls);
396 this.targetCounter = 0;
399 var mouseOffset = this.getMouseOffset();
400 return [this.targetXY[0]+mouseOffset[0], this.targetXY[1]+mouseOffset[1]];
404 getMouseOffset : function(){
405 var offset = this.anchor ? [0,0] : [15,18];
406 if(this.mouseOffset){
407 offset[0] += this.mouseOffset[0];
408 offset[1] += this.mouseOffset[1];
414 getAnchorPosition : function(){
416 this.tipAnchor = this.anchor.charAt(0);
418 var m = this.defaultAlign.match(/^([a-z]+)-([a-z]+)(\?)?$/);
420 throw 'AnchorTip.defaultAlign is invalid';
422 this.tipAnchor = m[1].charAt(0);
425 switch(this.tipAnchor){
426 case 't': return 'top';
427 case 'b': return 'bottom';
428 case 'r': return 'right';
434 getAnchorAlign : function(){
436 case 'top' : return 'tl-bl';
437 case 'left' : return 'tl-tr';
438 case 'right': return 'tr-tl';
439 default : return 'bl-tl';
444 getOffsets : function(){
446 ap = this.getAnchorPosition().charAt(0);
447 if(this.anchorToTarget && !this.trackMouse){
465 offsets = [-15-this.anchorOffset, 30];
468 offsets = [-19-this.anchorOffset, -13-this.el.dom.offsetHeight];
471 offsets = [-15-this.el.dom.offsetWidth, -13-this.anchorOffset];
474 offsets = [25, -13-this.anchorOffset];
478 var mouseOffset = this.getMouseOffset();
479 offsets[0] += mouseOffset[0];
480 offsets[1] += mouseOffset[1];
486 onTargetOver : function(e){
487 if(this.disabled || e.within(this.target.dom, true)){
490 var t = e.getTarget(this.delegate);
492 this.triggerElement = t;
493 this.clearTimer('hide');
494 this.targetXY = e.getXY();
500 delayShow : function(){
501 if(this.hidden && !this.showTimer){
502 if(this.lastActive.getElapsed() < this.quickShowInterval){
505 this.showTimer = this.show.defer(this.showDelay, this);
507 }else if(!this.hidden && this.autoHide !== false){
513 onTargetOut : function(e){
514 if(this.disabled || e.within(this.target.dom, true)){
517 this.clearTimer('show');
518 if(this.autoHide !== false){
524 delayHide : function(){
525 if(!this.hidden && !this.hideTimer){
526 this.hideTimer = this.hide.defer(this.hideDelay, this);
531 * Hides this tooltip if visible.
534 this.clearTimer('dismiss');
535 this.lastActive = new Date();
537 this.anchorEl.hide();
539 Ext.ToolTip.superclass.hide.call(this);
540 delete this.triggerElement;
544 * Shows this tooltip at the current event target XY position.
548 // pre-show it off screen so that the el will have dimensions
549 // for positioning calcs when getting xy next
550 this.showAt([-1000,-1000]);
551 this.origConstrainPosition = this.constrainPosition;
552 this.constrainPosition = false;
553 this.anchor = this.origAnchor;
555 this.showAt(this.getTargetXY());
559 this.anchorEl.show();
560 this.constrainPosition = this.origConstrainPosition;
562 this.anchorEl.hide();
567 showAt : function(xy){
568 this.lastActive = new Date();
570 Ext.ToolTip.superclass.showAt.call(this, xy);
571 if(this.dismissDelay && this.autoHide !== false){
572 this.dismissTimer = this.hide.defer(this.dismissDelay, this);
574 if(this.anchor && !this.anchorEl.isVisible()){
576 this.anchorEl.show();
581 syncAnchor : function(){
582 var anchorPos, targetPos, offset;
583 switch(this.tipAnchor.charAt(0)){
587 offset = [20+this.anchorOffset, 2];
592 offset = [-2, 11+this.anchorOffset];
597 offset = [20+this.anchorOffset, -2];
602 offset = [2, 11+this.anchorOffset];
605 this.anchorEl.alignTo(this.el, anchorPos+'-'+targetPos, offset);
609 setPagePosition : function(x, y){
610 Ext.ToolTip.superclass.setPagePosition.call(this, x, y);
617 clearTimer : function(name){
618 name = name + 'Timer';
619 clearTimeout(this[name]);
624 clearTimers : function(){
625 this.clearTimer('show');
626 this.clearTimer('dismiss');
627 this.clearTimer('hide');
632 Ext.ToolTip.superclass.onShow.call(this);
633 Ext.getDoc().on('mousedown', this.onDocMouseDown, this);
638 Ext.ToolTip.superclass.onHide.call(this);
639 Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
643 onDocMouseDown : function(e){
644 if(this.autoHide !== true && !this.closable && !e.within(this.el.dom)){
646 this.doEnable.defer(100, this);
651 doEnable : function(){
652 if(!this.isDestroyed){
658 onDisable : function(){
664 adjustPosition : function(x, y){
665 if(this.contstrainPosition){
666 var ay = this.targetXY[1], h = this.getSize().height;
667 if(y <= ay && (y+h) >= ay){
671 return {x : x, y: y};
674 beforeDestroy : function(){
676 Ext.destroy(this.anchorEl);
677 delete this.anchorEl;
679 delete this.anchorTarget;
680 delete this.triggerElement;
681 Ext.ToolTip.superclass.beforeDestroy.call(this);
685 onDestroy : function(){
686 Ext.getDoc().un('mousedown', this.onDocMouseDown, this);
687 Ext.ToolTip.superclass.onDestroy.call(this);
691 Ext.reg('tooltip', Ext.ToolTip);/**
692 * @class Ext.QuickTip
693 * @extends Ext.ToolTip
695 * A specialized tooltip class for tooltips that can be specified in markup and automatically managed by the global
696 * {@link Ext.QuickTips} instance. See the QuickTips class header for additional usage details and examples.
699 * @param {Object} config The configuration options
701 Ext.QuickTip = Ext.extend(Ext.ToolTip, {
703 * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to associate with this quicktip (defaults to the document).
706 * @cfg {Boolean} interceptTitles True to automatically use the element's DOM title value if available (defaults to false).
708 interceptTitles : false,
724 initComponent : function(){
725 this.target = this.target || Ext.getDoc();
726 this.targets = this.targets || {};
727 Ext.QuickTip.superclass.initComponent.call(this);
731 * Configures a new quick tip instance and assigns it to a target element. The following config values are
732 * supported (for example usage, see the {@link Ext.QuickTips} class header):
733 * <div class="mdetail-params"><ul>
736 * <li>dismissDelay (overrides the singleton value)</li>
737 * <li>target (required)</li>
738 * <li>text (required)</li>
740 * <li>width</li></ul></div>
741 * @param {Object} config The config object
743 register : function(config){
744 var cs = Ext.isArray(config) ? config : arguments;
745 for(var i = 0, len = cs.length; i < len; i++){
747 var target = c.target;
749 if(Ext.isArray(target)){
750 for(var j = 0, jlen = target.length; j < jlen; j++){
751 this.targets[Ext.id(target[j])] = c;
754 this.targets[Ext.id(target)] = c;
761 * Removes this quick tip from its element and destroys it.
762 * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
764 unregister : function(el){
765 delete this.targets[Ext.id(el)];
769 * Hides a visible tip or cancels an impending show for a particular element.
770 * @param {String/HTMLElement/Element} el The element that is the target of the tip.
772 cancelShow: function(el){
773 var at = this.activeTarget;
774 el = Ext.get(el).dom;
775 if(this.isVisible()){
776 if(at && at.el == el){
779 }else if(at && at.el == el){
780 this.clearTimer('show');
784 getTipCfg: function(e) {
785 var t = e.getTarget(),
788 if(this.interceptTitles && t.title && Ext.isString(t.title)){
791 t.removeAttribute("title");
794 cfg = this.tagConfig;
795 ttp = t.qtip || Ext.fly(t).getAttribute(cfg.attribute, cfg.namespace);
801 onTargetOver : function(e){
805 this.targetXY = e.getXY();
806 var t = e.getTarget();
807 if(!t || t.nodeType !== 1 || t == document || t == document.body){
810 if(this.activeTarget && ((t == this.activeTarget.el) || Ext.fly(this.activeTarget.el).contains(t))){
811 this.clearTimer('hide');
815 if(t && this.targets[t.id]){
816 this.activeTarget = this.targets[t.id];
817 this.activeTarget.el = t;
818 this.anchor = this.activeTarget.anchor;
820 this.anchorTarget = t;
825 var ttp, et = Ext.fly(t), cfg = this.tagConfig, ns = cfg.namespace;
826 if(ttp = this.getTipCfg(e)){
827 var autoHide = et.getAttribute(cfg.hide, ns);
828 this.activeTarget = {
831 width: et.getAttribute(cfg.width, ns),
832 autoHide: autoHide != "user" && autoHide !== 'false',
833 title: et.getAttribute(cfg.title, ns),
834 cls: et.getAttribute(cfg.cls, ns),
835 align: et.getAttribute(cfg.align, ns)
838 this.anchor = et.getAttribute(cfg.anchor, ns);
840 this.anchorTarget = t;
847 onTargetOut : function(e){
849 // If moving within the current target, and it does not have a new tip, ignore the mouseout
850 if (this.activeTarget && e.within(this.activeTarget.el) && !this.getTipCfg(e)) {
854 this.clearTimer('show');
855 if(this.autoHide !== false){
861 showAt : function(xy){
862 var t = this.activeTarget;
865 this.render(Ext.getBody());
866 this.activeTarget = t;
869 this.setWidth(t.width);
870 this.body.setWidth(this.adjustBodyWidth(t.width - this.getFrameWidth()));
871 this.measureWidth = false;
873 this.measureWidth = true;
875 this.setTitle(t.title || '');
876 this.body.update(t.text);
877 this.autoHide = t.autoHide;
878 this.dismissDelay = t.dismissDelay || this.dismissDelay;
880 this.el.removeClass(this.lastCls);
884 this.el.addClass(t.cls);
885 this.lastCls = t.cls;
888 this.constrainPosition = false;
889 }else if(t.align){ // TODO: this doesn't seem to work consistently
890 xy = this.el.getAlignToXY(t.el, t.align);
891 this.constrainPosition = false;
893 this.constrainPosition = true;
896 Ext.QuickTip.superclass.showAt.call(this, xy);
901 delete this.activeTarget;
902 Ext.QuickTip.superclass.hide.call(this);
905 Ext.reg('quicktip', Ext.QuickTip);/**
906 * @class Ext.QuickTips
907 * <p>Provides attractive and customizable tooltips for any element. The QuickTips
908 * singleton is used to configure and manage tooltips globally for multiple elements
909 * in a generic manner. To create individual tooltips with maximum customizability,
910 * you should consider either {@link Ext.Tip} or {@link Ext.ToolTip}.</p>
911 * <p>Quicktips can be configured via tag attributes directly in markup, or by
912 * registering quick tips programmatically via the {@link #register} method.</p>
913 * <p>The singleton's instance of {@link Ext.QuickTip} is available via
914 * {@link #getQuickTip}, and supports all the methods, and all the all the
915 * configuration properties of Ext.QuickTip. These settings will apply to all
916 * tooltips shown by the singleton.</p>
917 * <p>Below is the summary of the configuration properties which can be used.
918 * For detailed descriptions see {@link #getQuickTip}</p>
919 * <p><b>QuickTips singleton configs (all are optional)</b></p>
920 * <div class="mdetail-params"><ul><li>dismissDelay</li>
925 * <li>trackMouse</li></ul></div>
926 * <p><b>Target element configs (optional unless otherwise noted)</b></p>
927 * <div class="mdetail-params"><ul><li>autoHide</li>
929 * <li>dismissDelay (overrides singleton value)</li>
930 * <li>target (required)</li>
931 * <li>text (required)</li>
933 * <li>width</li></ul></div>
934 * <p>Here is an example showing how some of these config options could be used:</p>
936 // Init the singleton. Any tag-based quick tips will start working.
937 Ext.QuickTips.init();
939 // Apply a set of config properties to the singleton
940 Ext.apply(Ext.QuickTips.getQuickTip(), {
947 // Manually register a quick tip for a specific element
948 Ext.QuickTips.register({
951 text: 'This tooltip was added in code',
956 * <p>To register a quick tip in markup, you simply add one or more of the valid QuickTip attributes prefixed with
957 * the <b>ext:</b> namespace. The HTML element itself is automatically set as the quick tip target. Here is the summary
958 * of supported attributes (optional unless otherwise noted):</p>
959 * <ul><li><b>hide</b>: Specifying "user" is equivalent to setting autoHide = false. Any other value will be the
960 * same as autoHide = true.</li>
961 * <li><b>qclass</b>: A CSS class to be applied to the quick tip (equivalent to the 'cls' target element config).</li>
962 * <li><b>qtip (required)</b>: The quick tip text (equivalent to the 'text' target element config).</li>
963 * <li><b>qtitle</b>: The quick tip title (equivalent to the 'title' target element config).</li>
964 * <li><b>qwidth</b>: The quick tip width (equivalent to the 'width' target element config).</li></ul>
965 * <p>Here is an example of configuring an HTML element to display a tooltip from markup:</p>
967 // Add a quick tip to an HTML button
968 <input type="button" value="OK" ext:qtitle="OK Button" ext:qwidth="100"
969 ext:qtip="This is a quick tip from markup!"></input>
973 Ext.QuickTips = function(){
977 * Initialize the global QuickTips instance and prepare any quick tips.
978 * @param {Boolean} autoRender True to render the QuickTips container immediately to preload images. (Defaults to true)
980 init : function(autoRender){
983 Ext.onReady(function(){
984 Ext.QuickTips.init(autoRender);
988 tip = new Ext.QuickTip({elements:'header,body'});
989 if(autoRender !== false){
990 tip.render(Ext.getBody());
996 * Enable quick tips globally.
1001 if(locks.length < 1){
1008 * Disable quick tips globally.
1010 disable : function(){
1018 * Returns true if quick tips are enabled, else false.
1021 isEnabled : function(){
1022 return tip !== undefined && !tip.disabled;
1026 * Gets the global QuickTips instance.
1028 getQuickTip : function(){
1033 * Configures a new quick tip instance and assigns it to a target element. See
1034 * {@link Ext.QuickTip#register} for details.
1035 * @param {Object} config The config object
1037 register : function(){
1038 tip.register.apply(tip, arguments);
1042 * Removes any registered quick tip from the target element and destroys it.
1043 * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
1045 unregister : function(){
1046 tip.unregister.apply(tip, arguments);
1050 * Alias of {@link #register}.
1051 * @param {Object} config The config object
1054 tip.register.apply(tip, arguments);
1058 * @class Ext.slider.Tip
1060 * Simple plugin for using an Ext.Tip with a slider to show the slider value. Example usage:
1066 plugins: new Ext.slider.Tip()
1069 * Optionally provide your own tip text by overriding getText:
1075 plugins: new Ext.slider.Tip({
1076 getText: function(thumb){
1077 return String.format('<b>{0}% complete</b>', thumb.value);
1083 Ext.slider.Tip = Ext.extend(Ext.Tip, {
1087 init: function(slider) {
1090 dragstart: this.onSlide,
1091 drag : this.onSlide,
1092 dragend : this.hide,
1093 destroy : this.destroy
1099 * Called whenever a dragstart or drag event is received on the associated Thumb.
1100 * Aligns the Tip with the Thumb's new position.
1101 * @param {Ext.slider.MultiSlider} slider The slider
1102 * @param {Ext.EventObject} e The Event object
1103 * @param {Ext.slider.Thumb} thumb The thumb that the Tip is attached to
1105 onSlide : function(slider, e, thumb) {
1107 this.body.update(this.getText(thumb));
1109 this.el.alignTo(thumb.el, 'b-t?', this.offsets);
1113 * Used to create the text that appears in the Tip's body. By default this just returns
1114 * the value of the Slider Thumb that the Tip is attached to. Override to customize.
1115 * @param {Ext.slider.Thumb} thumb The Thumb that the Tip is attached to
1116 * @return {String} The text to display in the tip
1118 getText : function(thumb) {
1119 return String(thumb.value);
1123 //backwards compatibility - SliderTip used to be a ux before 3.2
1124 Ext.ux.SliderTip = Ext.slider.Tip;