/**
* @class Ext.tip.QuickTipManager
*
* Provides attractive and customizable tooltips for any element. The QuickTips
@@ -38,20 +55,17 @@
*
* Here is an example showing how some of these config options could be used:
*
- * {@img Ext.tip.QuickTipManager/Ext.tip.QuickTipManager.png Ext.tip.QuickTipManager component}
- *
- * ## Code
- *
+ * @example
* // Init the singleton. Any tag-based quick tips will start working.
* Ext.tip.QuickTipManager.init();
- *
+ *
* // Apply a set of config properties to the singleton
* Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), {
* maxWidth: 200,
* minWidth: 100,
* showDelay: 50 // Show 50ms after entering target
* });
- *
+ *
* // Create a small panel to add a quick tip to
* Ext.create('Ext.container.Container', {
* id: 'quickTipContainer',
@@ -62,8 +76,8 @@
* },
* renderTo: Ext.getBody()
* });
- *
- *
+ *
+ *
* // Manually register a quick tip for a specific element
* Ext.tip.QuickTipManager.register({
* target: 'quickTipContainer',
@@ -74,7 +88,7 @@
* });
*
* To register a quick tip in markup, you simply add one or more of the valid QuickTip attributes prefixed with
- * the **ext** namespace. The HTML element itself is automatically set as the quick tip target. Here is the summary
+ * the **data-** namespace. The HTML element itself is automatically set as the quick tip target. Here is the summary
* of supported attributes (optional unless otherwise noted):
*
* - `hide`: Specifying "user" is equivalent to setting autoHide = false. Any other value will be the same as autoHide = true.
@@ -84,10 +98,10 @@
* - `qwidth`: The quick tip width (equivalent to the 'width' target element config).
*
* Here is an example of configuring an HTML element to display a tooltip from markup:
- *
+ *
* // Add a quick tip to an HTML button
- * <input type="button" value="OK" ext:qtitle="OK Button" ext:qwidth="100"
- * data-qtip="This is a quick tip from markup!"></input>
+ * <input type="button" value="OK" data-qtitle="OK Button" data-qwidth="100"
+ * data-qtip="This is a quick tip from markup!"></input>
*
* @singleton
*/
@@ -99,11 +113,17 @@ Ext.define('Ext.tip.QuickTipManager', function() {
requires: ['Ext.tip.QuickTip'],
singleton: true,
alternateClassName: 'Ext.QuickTips',
- /**
+
+ /**
* Initialize the global QuickTips instance and prepare any quick tips.
- * @param {Boolean} autoRender True to render the QuickTips container immediately to preload images. (Defaults to true)
+ * @param {Boolean} autoRender (optional) True to render the QuickTips container immediately to
+ * preload images. (Defaults to true)
+ * @param {Object} config (optional) config object for the created QuickTip. By
+ * default, the {@link Ext.tip.QuickTip QuickTip} class is instantiated, but this can
+ * be changed by supplying an xtype property or a className property in this object.
+ * All other properties on this object are configuration for the created component.
*/
- init : function(autoRender){
+ init : function (autoRender, config) {
if (!tip) {
if (!Ext.isReady) {
Ext.onReady(function(){
@@ -111,14 +131,37 @@ Ext.define('Ext.tip.QuickTipManager', function() {
});
return;
}
- tip = Ext.create('Ext.tip.QuickTip', {
- disabled: disabled,
- renderTo: autoRender !== false ? document.body : undefined
- });
+
+ var tipConfig = Ext.apply({ disabled: disabled }, config),
+ className = tipConfig.className,
+ xtype = tipConfig.xtype;
+
+ if (className) {
+ delete tipConfig.className;
+ } else if (xtype) {
+ className = 'widget.' + xtype;
+ delete tipConfig.xtype;
+ }
+
+ if (autoRender !== false) {
+ tipConfig.renderTo = document.body;
+
+ //<debug>
+ if (tipConfig.renderTo.tagName != 'BODY') { // e.g., == 'FRAMESET'
+ Ext.Error.raise({
+ sourceClass: 'Ext.tip.QuickTipManager',
+ sourceMethod: 'init',
+ msg: 'Cannot init QuickTipManager: no document body'
+ });
+ }
+ //</debug>
+ }
+
+ tip = Ext.create(className || 'Ext.tip.QuickTip', tipConfig);
}
},
- /**
+ /**
* Destroy the QuickTips instance.
*/
destroy: function() {
@@ -145,7 +188,7 @@ Ext.define('Ext.tip.QuickTipManager', function() {
}
},
- /**
+ /**
* Enable quick tips globally.
*/
enable : function(){
@@ -155,7 +198,7 @@ Ext.define('Ext.tip.QuickTipManager', function() {
disabled = false;
},
- /**
+ /**
* Disable quick tips globally.
*/
disable : function(){
@@ -165,7 +208,7 @@ Ext.define('Ext.tip.QuickTipManager', function() {
disabled = true;
},
- /**
+ /**
* Returns true if quick tips are enabled, else false.
* @return {Boolean}
*/
@@ -173,7 +216,7 @@ Ext.define('Ext.tip.QuickTipManager', function() {
return tip !== undefined && !tip.disabled;
},
- /**
+ /**
* Gets the single {@link Ext.tip.QuickTip QuickTip} instance used to show tips from all registered elements.
* @return {Ext.tip.QuickTip}
*/
@@ -181,7 +224,7 @@ Ext.define('Ext.tip.QuickTipManager', function() {
return tip;
},
- /**
+ /**
* Configures a new quick tip instance and assigns it to a target element. See
* {@link Ext.tip.QuickTip#register} for details.
* @param {Object} config The config object
@@ -190,15 +233,15 @@ Ext.define('Ext.tip.QuickTipManager', function() {
tip.register.apply(tip, arguments);
},
- /**
+ /**
* Removes any registered quick tip from the target element and destroys it.
- * @param {String/HTMLElement/Element} el The element from which the quick tip is to be removed.
+ * @param {String/HTMLElement/Ext.Element} el The element from which the quick tip is to be removed or ID of the element.
*/
unregister : function(){
tip.unregister.apply(tip, arguments);
},
- /**
+ /**
* Alias of {@link #register}.
* @param {Object} config The config object
*/
@@ -206,4 +249,6 @@ Ext.define('Ext.tip.QuickTipManager', function() {
tip.register.apply(tip, arguments);
}
};
-}());