X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/7a654f8d43fdb43d78b63d90528bed6e86b608cc..3789b528d8dd8aad4558e38e22d775bcab1cbd36:/src/tip/QuickTipManager.js diff --git a/src/tip/QuickTipManager.js b/src/tip/QuickTipManager.js index b8d34ba6..25b99a0f 100644 --- a/src/tip/QuickTipManager.js +++ b/src/tip/QuickTipManager.js @@ -1,83 +1,94 @@ /** * @class Ext.tip.QuickTipManager - *

Provides attractive and customizable tooltips for any element. The QuickTips + * + * Provides attractive and customizable tooltips for any element. The QuickTips * singleton is used to configure and manage tooltips globally for multiple elements * in a generic manner. To create individual tooltips with maximum customizability, - * you should consider either {@link Ext.tip.Tip} or {@link Ext.tip.ToolTip}.

- *

Quicktips can be configured via tag attributes directly in markup, or by - * registering quick tips programmatically via the {@link #register} method.

- *

The singleton's instance of {@link Ext.tip.QuickTip} is available via + * you should consider either {@link Ext.tip.Tip} or {@link Ext.tip.ToolTip}. + * + * Quicktips can be configured via tag attributes directly in markup, or by + * registering quick tips programmatically via the {@link #register} method. + * + * The singleton's instance of {@link Ext.tip.QuickTip} is available via * {@link #getQuickTip}, and supports all the methods, and all the all the * configuration properties of Ext.tip.QuickTip. These settings will apply to all - * tooltips shown by the singleton.

- *

Below is the summary of the configuration properties which can be used. - * For detailed descriptions see the config options for the {@link Ext.tip.QuickTip QuickTip} class

- *

QuickTips singleton configs (all are optional)

- *
- *

Target element configs (optional unless otherwise noted)

- *
- *

Here is an example showing how some of these config options could be used:

+ * tooltips shown by the singleton. + * + * Below is the summary of the configuration properties which can be used. + * For detailed descriptions see the config options for the {@link Ext.tip.QuickTip QuickTip} class + * + * ## QuickTips singleton configs (all are optional) + * + * - `dismissDelay` + * - `hideDelay` + * - `maxWidth` + * - `minWidth` + * - `showDelay` + * - `trackMouse` + * + * ## Target element configs (optional unless otherwise noted) + * + * - `autoHide` + * - `cls` + * - `dismissDelay` (overrides singleton value) + * - `target` (required) + * - `text` (required) + * - `title` + * - `width` + * + * 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 - * // 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', - * width: 200, - * height: 150, - * style: { - * backgroundColor:'#000000' - * }, - * renderTo: Ext.getBody() - * }); - * - * - * // Manually register a quick tip for a specific element - * Ext.tip.QuickTipManager.register({ - * target: 'quickTipContainer', - * title: 'My Tooltip', - * text: 'This tooltip was added in code', - * width: 100, - * dismissDelay: 10000 // Hide after 10 seconds hover - * }); - - *

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 - * of supported attributes (optional unless otherwise noted):

- * - *

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>
-
+ * + * // 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', + * width: 200, + * height: 150, + * style: { + * backgroundColor:'#000000' + * }, + * renderTo: Ext.getBody() + * }); + * + * + * // Manually register a quick tip for a specific element + * Ext.tip.QuickTipManager.register({ + * target: 'quickTipContainer', + * title: 'My Tooltip', + * text: 'This tooltip was added in code', + * width: 100, + * dismissDelay: 10000 // Hide after 10 seconds hover + * }); + * + * To register a quick tip in markup, you simply add one or more of the valid QuickTip attributes prefixed with + * 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. + * - `qclass`: A CSS class to be applied to the quick tip (equivalent to the 'cls' target element config). + * - `qtip (required)`: The quick tip text (equivalent to the 'text' target element config). + * - `qtitle`: The quick tip title (equivalent to the 'title' target element config). + * - `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 + * + * * @singleton */ Ext.define('Ext.tip.QuickTipManager', function() { @@ -88,11 +99,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 True to render the QuickTips container immediately to + * preload images. (Defaults to true) + * @param {Object} config An 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(){ @@ -100,10 +117,33 @@ 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; + + // + if (tipConfig.renderTo.tagName != 'BODY') { // e.g., == 'FRAMESET' + Ext.Error.raise({ + sourceClass: 'Ext.tip.QuickTipManager', + sourceMethod: 'init', + msg: 'Cannot init QuickTipManager: no document body' + }); + } + // + } + + tip = Ext.create(className || 'Ext.tip.QuickTip', tipConfig); } },