4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>The source code</title>
6 <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
7 <script type="text/javascript" src="../prettify/prettify.js"></script>
8 <style type="text/css">
9 .highlight { display: block; background-color: #ddd; }
11 <script type="text/javascript">
12 function highlight() {
13 document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
17 <body onload="prettyPrint(); highlight();">
18 <pre class="prettyprint lang-js"><span id='Ext-tip-QuickTip'>/**
19 </span> * @class Ext.tip.QuickTip
20 * @extends Ext.tip.ToolTip
21 * A specialized tooltip class for tooltips that can be specified in markup and automatically managed by the global
22 * {@link Ext.tip.QuickTipManager} instance. See the QuickTipManager class header for additional usage details and examples.
25 Ext.define('Ext.tip.QuickTip', {
26 extend: 'Ext.tip.ToolTip',
27 alternateClassName: 'Ext.QuickTip',
28 <span id='Ext-tip-QuickTip-cfg-target'> /**
29 </span> * @cfg {Mixed} target The target HTMLElement, Ext.core.Element or id to associate with this Quicktip (defaults to the document).
31 <span id='Ext-tip-QuickTip-cfg-interceptTitles'> /**
32 </span> * @cfg {Boolean} interceptTitles True to automatically use the element's DOM title value if available (defaults to false).
34 interceptTitles : false,
36 // Force creation of header Component
41 namespace : "data-",
42 attribute : "qtip",
43 width : "qwidth",
44 target : "target",
45 title : "qtitle",
46 hide : "hide",
47 cls : "qclass",
48 align : "qalign",
49 anchor : "anchor"
53 initComponent : function(){
56 me.target = me.target || Ext.getDoc();
57 me.targets = me.targets || {};
61 <span id='Ext-tip-QuickTip-method-register'> /**
62 </span> * Configures a new quick tip instance and assigns it to a target element. The following config values are
63 * supported (for example usage, see the {@link Ext.tip.QuickTipManager} class header):
64 * <div class="mdetail-params"><ul>
65 * <li>autoHide</li>
66 * <li>cls</li>
67 * <li>dismissDelay (overrides the singleton value)</li>
68 * <li>target (required)</li>
69 * <li>text (required)</li>
70 * <li>title</li>
71 * <li>width</li></ul></div>
72 * @param {Object} config The config object
74 register : function(config){
75 var configs = Ext.isArray(config) ? config : arguments,
80 for (; i < len; i++) {
82 target = config.target;
84 if (Ext.isArray(target)) {
85 for (j = 0, targetLen = target.length; j < targetLen; j++) {
86 this.targets[Ext.id(target[j])] = config;
89 this.targets[Ext.id(target)] = config;
95 <span id='Ext-tip-QuickTip-method-unregister'> /**
96 </span> * Removes this quick tip from its element and destroys it.
97 * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
99 unregister : function(el){
100 delete this.targets[Ext.id(el)];
103 <span id='Ext-tip-QuickTip-method-cancelShow'> /**
104 </span> * Hides a visible tip or cancels an impending show for a particular element.
105 * @param {String/HTMLElement/Element} el The element that is the target of the tip.
107 cancelShow: function(el){
109 activeTarget = me.activeTarget;
111 el = Ext.get(el).dom;
112 if (me.isVisible()) {
113 if (activeTarget && activeTarget.el == el) {
116 } else if (activeTarget && activeTarget.el == el) {
117 me.clearTimer('show');
121 getTipCfg: function(e) {
122 var t = e.getTarget(),
126 if(this.interceptTitles && t.title && Ext.isString(t.title)){
129 t.removeAttribute("title");
133 cfg = this.tagConfig;
134 t = e.getTarget('[' + cfg.namespace + cfg.attribute + ']');
136 ttp = t.getAttribute(cfg.namespace + cfg.attribute);
143 onTargetOver : function(e){
145 target = e.getTarget(),
156 // TODO - this causes "e" to be recycled in IE6/7 (EXTJSIV-1608) so ToolTip#setTarget
157 // was changed to include freezeEvent. The issue seems to be a nested 'resize' event
158 // that smashed Ext.EventObject.
159 me.targetXY = e.getXY();
161 if(!target || target.nodeType !== 1 || target == document || target == document.body){
165 if (me.activeTarget && ((target == me.activeTarget.el) || Ext.fly(me.activeTarget.el).contains(target))) {
166 me.clearTimer('hide');
172 Ext.Object.each(me.targets, function(key, value) {
173 var targetEl = Ext.fly(value.target);
174 if (targetEl && (targetEl.dom === target || targetEl.contains(target))) {
175 elTarget = targetEl.dom;
180 me.activeTarget = me.targets[elTarget.id];
181 me.activeTarget.el = target;
182 me.anchor = me.activeTarget.anchor;
184 me.anchorTarget = target;
191 elTarget = Ext.get(target);
194 ttp = me.getTipCfg(e);
197 autoHide = elTarget.getAttribute(ns + cfg.hide);
202 width: +elTarget.getAttribute(ns + cfg.width) || null,
203 autoHide: autoHide != "user" && autoHide !== 'false',
204 title: elTarget.getAttribute(ns + cfg.title),
205 cls: elTarget.getAttribute(ns + cfg.cls),
206 align: elTarget.getAttribute(ns + cfg.align)
209 me.anchor = elTarget.getAttribute(ns + cfg.anchor);
211 me.anchorTarget = target;
218 onTargetOut : function(e){
221 // If moving within the current target, and it does not have a new tip, ignore the mouseout
222 if (me.activeTarget && e.within(me.activeTarget.el) && !me.getTipCfg(e)) {
226 me.clearTimer('show');
227 if (me.autoHide !== false) {
233 showAt : function(xy){
235 target = me.activeTarget;
239 me.render(Ext.getBody());
240 me.activeTarget = target;
243 me.setTitle(target.title || '');
248 me.body.update(target.text);
249 me.autoHide = target.autoHide;
250 me.dismissDelay = target.dismissDelay || me.dismissDelay;
252 me.el.removeCls(me.lastCls);
256 me.el.addCls(target.cls);
257 me.lastCls = target.cls;
260 me.setWidth(target.width);
263 me.constrainPosition = false;
264 } else if (target.align) { // TODO: this doesn't seem to work consistently
265 xy = me.el.getAlignToXY(target.el, target.align);
266 me.constrainPosition = false;
268 me.constrainPosition = true;
276 delete this.activeTarget;