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} or {@link Ext.ToolTip}.
+ * 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.QuickTip} is available via + *
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.QuickTip. These settings will apply to all + * 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.QuickTip QuickTip} class
+ * For detailed descriptions see the config options for the {@link Ext.tip.QuickTip QuickTip} class *QuickTips singleton configs (all are optional)
*Here is an example showing how some of these config options could be used:
- *
-// Init the singleton. Any tag-based quick tips will start working.
-Ext.QuickTips.init();
-
-// Apply a set of config properties to the singleton
-Ext.apply(Ext.QuickTips.getQuickTip(), {
- maxWidth: 200,
- minWidth: 100,
- showDelay: 50, // Show 50ms after entering target
- trackMouse: true
-});
-
-// Manually register a quick tip for a specific element
-Ext.QuickTips.register({
- target: 'my-div',
- title: 'My Tooltip',
- text: 'This tooltip was added in code',
- width: 100,
- dismissDelay: 10000 // Hide after 10 seconds hover
-});
+ *
+ * {@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 @@ -68,45 +76,56 @@ Ext.QuickTips.register({ *
// Add a quick tip to an HTML button
<input type="button" value="OK" ext:qtitle="OK Button" ext:qwidth="100"
- ext:qtip="This is a quick tip from markup!"></input>
+ data-qtip="This is a quick tip from markup!"></input>