/** * 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 * {@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) * * - `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: * * @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', * 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() { var tip, disabled = false; return { requires: ['Ext.tip.QuickTip'], singleton: true, alternateClassName: 'Ext.QuickTips', /** * Initializes the global QuickTips instance and prepare any quick tips. * @param {Boolean} [autoRender=true] True to render the QuickTips container * immediately to preload images. * @param {Object} [config] 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, config) { if (!tip) { if (!Ext.isReady) { Ext.onReady(function(){ Ext.tip.QuickTipManager.init(autoRender, config); }); return; } var tipConfig = Ext.apply({ disabled: disabled, id: 'ext-quicktips-tip' }, 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.toUpperCase() != '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); } }, /** * Destroys the QuickTips instance. */ destroy: function() { if (tip) { var undef; tip.destroy(); tip = undef; } }, // Protected method called by the dd classes ddDisable : function(){ // don't disable it if we don't need to if(tip && !disabled){ tip.disable(); } }, // Protected method called by the dd classes ddEnable : function(){ // only enable it if it hasn't been disabled if(tip && !disabled){ tip.enable(); } }, /** * Enables quick tips globally. */ enable : function(){ if(tip){ tip.enable(); } disabled = false; }, /** * Disables quick tips globally. */ disable : function(){ if(tip){ tip.disable(); } disabled = true; }, /** * Returns true if quick tips are enabled, else false. * @return {Boolean} */ isEnabled : 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} */ getQuickTip : 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 */ register : function(){ tip.register.apply(tip, arguments); }, /** * Removes any registered quick tip from the target 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(){ tip.unregister.apply(tip, arguments); }, /** * Alias of {@link #register}. * @inheritdoc Ext.tip.QuickTipManager#register */ tips : function(){ tip.register.apply(tip, arguments); } }; }()));