/**
+ * @class Ext.tip.QuickTip
+ * @extends Ext.tip.ToolTip
* A specialized tooltip class for tooltips that can be specified in markup and automatically managed by the global
- * {@link Ext.QuickTips} instance. See the QuickTips class header for additional usage details and examples.
- * @constructor
- * Create a new Tip
- * @param {Object} config The configuration options
+ * {@link Ext.tip.QuickTipManager} instance. See the QuickTipManager documentation for additional usage details and examples.
+ * @xtype quicktip
*/
-Ext.QuickTip = Ext.extend(Ext.ToolTip, {
- /**
- * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to associate with this quicktip (defaults to the document).
+Ext.define('Ext.tip.QuickTip', {
+ extend: 'Ext.tip.ToolTip',
+ alternateClassName: 'Ext.QuickTip',
+ /**
+ * @cfg {String/HTMLElement/Ext.Element} target The target HTMLElement, Ext.Element or id to associate with this Quicktip (defaults to the document).
*/
- /**
- * @cfg {Boolean} interceptTitles True to automatically use the element's DOM title value if available (defaults to false).
+ /**
+ * @cfg {Boolean} interceptTitles True to automatically use the element's DOM title value if available.
*/
interceptTitles : false,
+ // Force creation of header Component
+ title: ' ',
+
// private
tagConfig : {
- namespace : "ext",
- attribute : "qtip",
- width : "qwidth",
- target : "target",
- title : "qtitle",
- hide : "hide",
- cls : "qclass",
- align : "qalign",
- anchor : "anchor"
+ namespace : "data-",
+ attribute : "qtip",
+ width : "qwidth",
+ target : "target",
+ title : "qtitle",
+ hide : "hide",
+ cls : "qclass",
+ align : "qalign",
+ anchor : "anchor"
},
// private
initComponent : function(){
- this.target = this.target || Ext.getDoc();
- this.targets = this.targets || {};
- Ext.QuickTip.superclass.initComponent.call(this);
+ var me = this;
+
+ me.target = me.target || Ext.getDoc();
+ me.targets = me.targets || {};
+ me.callParent();
},
- /**
- * Configures a new quick tip instance and assigns it to a target element. The following config values are
- * supported (for example usage, see the {@link Ext.QuickTips} class header):
- *
- *
autoHide
- *
cls
- *
dismissDelay (overrides the singleton value)
- *
target (required)
- *
text (required)
- *
title
- *
width
+ /**
+ * Configures a new quick tip instance and assigns it to a target element. The following config values are
+ * supported (for example usage, see the {@link Ext.tip.QuickTipManager} class header):
+ * <div class="mdetail-params"><ul>
+ * <li>autoHide</li>
+ * <li>cls</li>
+ * <li>dismissDelay (overrides the singleton value)</li>
+ * <li>target (required)</li>
+ * <li>text (required)</li>
+ * <li>title</li>
+ * <li>width</li></ul></div>
* @param {Object} config The config object
*/
register : function(config){
- var cs = Ext.isArray(config) ? config : arguments;
- for(var i = 0, len = cs.length; i < len; i++){
- var c = cs[i];
- var target = c.target;
- if(target){
- if(Ext.isArray(target)){
- for(var j = 0, jlen = target.length; j < jlen; j++){
- this.targets[Ext.id(target[j])] = c;
+ var configs = Ext.isArray(config) ? config : arguments,
+ i = 0,
+ len = configs.length,
+ target, j, targetLen;
+
+ for (; i < len; i++) {
+ config = configs[i];
+ target = config.target;
+ if (target) {
+ if (Ext.isArray(target)) {
+ for (j = 0, targetLen = target.length; j < targetLen; j++) {
+ this.targets[Ext.id(target[j])] = config;
}
} else{
- this.targets[Ext.id(target)] = c;
+ this.targets[Ext.id(target)] = config;
}
}
}
},
- /**
- * Removes this quick tip from its element and destroys it.
- * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
+ /**
+ * Removes this quick tip from its element and destroys it.
+ * @param {String/HTMLElement/Ext.Element} el The element from which the quick tip is to be removed or ID of the element.
*/
unregister : function(el){
delete this.targets[Ext.id(el)];
},
-
- /**
- * Hides a visible tip or cancels an impending show for a particular element.
- * @param {String/HTMLElement/Element} el The element that is the target of the tip.
+
+ /**
+ * Hides a visible tip or cancels an impending show for a particular element.
+ * @param {String/HTMLElement/Ext.Element} el The element that is the target of the tip or ID of the element.
*/
cancelShow: function(el){
- var at = this.activeTarget;
+ var me = this,
+ activeTarget = me.activeTarget;
+
el = Ext.get(el).dom;
- if(this.isVisible()){
- if(at && at.el == el){
- this.hide();
+ if (me.isVisible()) {
+ if (activeTarget && activeTarget.el == el) {
+ me.hide();
}
- }else if(at && at.el == el){
- this.clearTimer('show');
+ } else if (activeTarget && activeTarget.el == el) {
+ me.clearTimer('show');
}
},
-
+
+ /**
+ * @private
+ * Reads the tip text from the closest node to the event target which contains the attribute we
+ * are configured to look for. Returns an object containing the text from the attribute, and the target element from
+ * which the text was read.
+ */
getTipCfg: function(e) {
- var t = e.getTarget(),
- ttp,
+ var t = e.getTarget(),
+ titleText = t.title,
cfg;
- if(this.interceptTitles && t.title && Ext.isString(t.title)){
- ttp = t.title;
- t.qtip = ttp;
- t.removeAttribute("title");
+
+ if (this.interceptTitles && titleText && Ext.isString(titleText)) {
+ t.qtip = titleText;
+ t.removeAttribute("title");
e.preventDefault();
- }else{
+ return {
+ text: titleText
+ };
+ }
+ else {
cfg = this.tagConfig;
- ttp = t.qtip || Ext.fly(t).getAttribute(cfg.attribute, cfg.namespace);
+ t = e.getTarget('[' + cfg.namespace + cfg.attribute + ']');
+ if (t) {
+ return {
+ target: t,
+ text: t.getAttribute(cfg.namespace + cfg.attribute)
+ };
+ }
}
- return ttp;
},
// private
onTargetOver : function(e){
- if(this.disabled){
+ var me = this,
+ target = e.getTarget(),
+ elTarget,
+ cfg,
+ ns,
+ tipConfig,
+ autoHide;
+
+ if (me.disabled) {
return;
}
- this.targetXY = e.getXY();
- var t = e.getTarget();
- if(!t || t.nodeType !== 1 || t == document || t == document.body){
+
+ // TODO - this causes "e" to be recycled in IE6/7 (EXTJSIV-1608) so ToolTip#setTarget
+ // was changed to include freezeEvent. The issue seems to be a nested 'resize' event
+ // that smashed Ext.EventObject.
+ me.targetXY = e.getXY();
+
+ if(!target || target.nodeType !== 1 || target == document || target == document.body){
return;
}
- if(this.activeTarget && ((t == this.activeTarget.el) || Ext.fly(this.activeTarget.el).contains(t))){
- this.clearTimer('hide');
- this.show();
+
+ if (me.activeTarget && ((target == me.activeTarget.el) || Ext.fly(me.activeTarget.el).contains(target))) {
+ me.clearTimer('hide');
+ me.show();
return;
}
- if(t && this.targets[t.id]){
- this.activeTarget = this.targets[t.id];
- this.activeTarget.el = t;
- this.anchor = this.activeTarget.anchor;
- if(this.anchor){
- this.anchorTarget = t;
+
+ if (target) {
+ Ext.Object.each(me.targets, function(key, value) {
+ var targetEl = Ext.fly(value.target);
+ if (targetEl && (targetEl.dom === target || targetEl.contains(target))) {
+ elTarget = targetEl.dom;
+ return false;
+ }
+ });
+ if (elTarget) {
+ me.activeTarget = me.targets[elTarget.id];
+ me.activeTarget.el = target;
+ me.anchor = me.activeTarget.anchor;
+ if (me.anchor) {
+ me.anchorTarget = target;
+ }
+ me.delayShow();
+ return;
}
- this.delayShow();
- return;
}
- var ttp, et = Ext.fly(t), cfg = this.tagConfig, ns = cfg.namespace;
- if(ttp = this.getTipCfg(e)){
- var autoHide = et.getAttribute(cfg.hide, ns);
- this.activeTarget = {
- el: t,
- text: ttp,
- width: et.getAttribute(cfg.width, ns),
- autoHide: autoHide != "user" && autoHide !== 'false',
- title: et.getAttribute(cfg.title, ns),
- cls: et.getAttribute(cfg.cls, ns),
- align: et.getAttribute(cfg.align, ns)
-
+
+ elTarget = Ext.get(target);
+ cfg = me.tagConfig;
+ ns = cfg.namespace;
+ tipConfig = me.getTipCfg(e);
+
+ if (tipConfig) {
+
+ // getTipCfg may look up the parentNode axis for a tip text attribute and will return the new target node.
+ // Change our target element to match that from which the tip text attribute was read.
+ if (tipConfig.target) {
+ target = tipConfig.target;
+ elTarget = Ext.get(target);
+ }
+ autoHide = elTarget.getAttribute(ns + cfg.hide);
+
+ me.activeTarget = {
+ el: target,
+ text: tipConfig.text,
+ width: +elTarget.getAttribute(ns + cfg.width) || null,
+ autoHide: autoHide != "user" && autoHide !== 'false',
+ title: elTarget.getAttribute(ns + cfg.title),
+ cls: elTarget.getAttribute(ns + cfg.cls),
+ align: elTarget.getAttribute(ns + cfg.align)
+
};
- this.anchor = et.getAttribute(cfg.anchor, ns);
- if(this.anchor){
- this.anchorTarget = t;
+ me.anchor = elTarget.getAttribute(ns + cfg.anchor);
+ if (me.anchor) {
+ me.anchorTarget = target;
}
- this.delayShow();
+ me.delayShow();
}
},
// private
onTargetOut : function(e){
+ var me = this;
// If moving within the current target, and it does not have a new tip, ignore the mouseout
- if (this.activeTarget && e.within(this.activeTarget.el) && !this.getTipCfg(e)) {
+ if (me.activeTarget && e.within(me.activeTarget.el) && !me.getTipCfg(e)) {
return;
}
- this.clearTimer('show');
- if(this.autoHide !== false){
- this.delayHide();
+ me.clearTimer('show');
+ if (me.autoHide !== false) {
+ me.delayHide();
}
},
// inherit docs
showAt : function(xy){
- var t = this.activeTarget;
- if(t){
- if(!this.rendered){
- this.render(Ext.getBody());
- this.activeTarget = t;
+ var me = this,
+ target = me.activeTarget;
+
+ if (target) {
+ if (!me.rendered) {
+ me.render(Ext.getBody());
+ me.activeTarget = target;
}
- if(t.width){
- this.setWidth(t.width);
- this.body.setWidth(this.adjustBodyWidth(t.width - this.getFrameWidth()));
- this.measureWidth = false;
- } else{
- this.measureWidth = true;
+ if (target.title) {
+ me.setTitle(target.title || '');
+ me.header.show();
+ } else {
+ me.header.hide();
}
- this.setTitle(t.title || '');
- this.body.update(t.text);
- this.autoHide = t.autoHide;
- this.dismissDelay = t.dismissDelay || this.dismissDelay;
- if(this.lastCls){
- this.el.removeClass(this.lastCls);
- delete this.lastCls;
+ me.body.update(target.text);
+ me.autoHide = target.autoHide;
+ me.dismissDelay = target.dismissDelay || me.dismissDelay;
+ if (me.lastCls) {
+ me.el.removeCls(me.lastCls);
+ delete me.lastCls;
}
- if(t.cls){
- this.el.addClass(t.cls);
- this.lastCls = t.cls;
+ if (target.cls) {
+ me.el.addCls(target.cls);
+ me.lastCls = target.cls;
}
- if(this.anchor){
- this.constrainPosition = false;
- }else if(t.align){ // TODO: this doesn't seem to work consistently
- xy = this.el.getAlignToXY(t.el, t.align);
- this.constrainPosition = false;
+
+ me.setWidth(target.width);
+
+ if (me.anchor) {
+ me.constrainPosition = false;
+ } else if (target.align) { // TODO: this doesn't seem to work consistently
+ xy = me.el.getAlignToXY(target.el, target.align);
+ me.constrainPosition = false;
}else{
- this.constrainPosition = true;
+ me.constrainPosition = true;
}
}
- Ext.QuickTip.superclass.showAt.call(this, xy);
+ me.callParent([xy]);
},
// inherit docs
hide: function(){
delete this.activeTarget;
- Ext.QuickTip.superclass.hide.call(this);
+ this.callParent();
}
});
-Ext.reg('quicktip', Ext.QuickTip);