Upgrade to ExtJS 4.0.0 - Released 04/26/2011
[extjs.git] / docs / api / Ext.tip.QuickTipManager.html
diff --git a/docs/api/Ext.tip.QuickTipManager.html b/docs/api/Ext.tip.QuickTipManager.html
new file mode 100644 (file)
index 0000000..c40bbfe
--- /dev/null
@@ -0,0 +1,176 @@
+<!DOCTYPE html><html><head><title>Ext.tip.QuickTipManager | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
+<style type="text/css">.head-band { display: none; }
+.header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
+.doc-tab .members .member a.more { background-color: #efefef; }
+</style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
+</head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit 
+<a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">
+
+    req = {
+        liveURL: '.',
+        standAloneMode: true,
+        origDocClass: 'Ext.tip.QuickTipManager',
+        docClass: 'Ext.tip.QuickTipManager',
+        docReq: 'Ext.tip.QuickTipManager',
+        version: '4.0',
+        baseURL: '.',
+        baseDocURL: '.',
+        baseProdURL: '.'
+    };
+
+    clsInfo = {};
+
+
+
+</script>
+
+<script type="text/javascript" src="../search.js"></script>
+<!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
+<script type="text/javascript" src="../class_tree.js"></script>
+<script type="text/javascript" src="../class_doc.js"></script>
+<script type="text/javascript">
+    req.source = 'QuickTipManager.html#Ext-tip.QuickTipManager';
+    clsInfo = {"methods":["destroy","disable","enable","getQuickTip","init","isEnabled","register","tips","unregister"],"cfgs":[],"properties":[],"events":[],"subclasses":[]};
+    Ext.onReady(function() {
+        Ext.create('Docs.classPanel');
+    });
+</script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager" target="_blank">Ext.tip.QuickTipManager</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><p>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 <a href="Ext.tip.Tip.html" rel="Ext.tip.Tip" class="docClass">Ext.tip.Tip</a> or <a href="Ext.tip.ToolTip.html" rel="Ext.tip.ToolTip" class="docClass">Ext.tip.ToolTip</a>.</p>
+
+<p>Quicktips can be configured via tag attributes directly in markup, or by
+registering quick tips programmatically via the <a href="Ext.tip.QuickTipManager.html#register" rel="Ext.tip.QuickTipManager#register" class="docClass">register</a> method.</p>
+
+<p>The singleton's instance of <a href="Ext.tip.QuickTip.html" rel="Ext.tip.QuickTip" class="docClass">Ext.tip.QuickTip</a> is available via
+<a href="Ext.tip.QuickTipManager.html#getQuickTip" rel="Ext.tip.QuickTipManager#getQuickTip" class="docClass">getQuickTip</a>, and supports all the methods, and all the all the
+configuration properties of <a href="Ext.tip.QuickTip.html" rel="Ext.tip.QuickTip" class="docClass">Ext.tip.QuickTip</a>. These settings will apply to all
+tooltips shown by the singleton.</p>
+
+<p>Below is the summary of the configuration properties which can be used.
+For detailed descriptions see the config options for the <a href="Ext.tip.QuickTip.html" rel="Ext.tip.QuickTip" class="docClass">QuickTip</a> class</p>
+
+<h2>QuickTips singleton configs (all are optional)</h2>
+
+<ul>
+<li><code>dismissDelay</code></li>
+<li><code>hideDelay</code></li>
+<li><code>maxWidth</code></li>
+<li><code>minWidth</code></li>
+<li><code>showDelay</code></li>
+<li><code>trackMouse</code></li>
+</ul>
+
+
+<h2>Target element configs (optional unless otherwise noted)</h2>
+
+<ul>
+<li><code>autoHide</code></li>
+<li><code>cls</code></li>
+<li><code>dismissDelay</code> (overrides singleton value)</li>
+<li><code>target</code> (required)</li>
+<li><code>text</code> (required)</li>
+<li><code>title</code></li>
+<li><code>width</code></li>
+</ul>
+
+
+<p>Here is an example showing how some of these config options could be used:</p>
+
+<p><img class="screenshot" src="../Ext.tip.QuickTipManager.png" alt="Ext.tip.QuickTipManager component" /></p>
+
+<h2>Code</h2>
+
+<pre class="prettyprint"><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
+});
+</code></pre>
+
+<p>To register a quick tip in markup, you simply add one or more of the valid QuickTip attributes prefixed with
+the <strong>ext</strong> namespace.  The HTML element itself is automatically set as the quick tip target. Here is the summary
+of supported attributes (optional unless otherwise noted):</p>
+
+<ul>
+<li><code>hide</code>: Specifying "user" is equivalent to setting autoHide = false.  Any other value will be the same as autoHide = true.</li>
+<li><code>qclass</code>: A CSS class to be applied to the quick tip (equivalent to the 'cls' target element config).</li>
+<li><code>qtip (required)</code>: The quick tip text (equivalent to the 'text' target element config).</li>
+<li><code>qtitle</code>: The quick tip title (equivalent to the 'title' target element config).</li>
+<li><code>qwidth</code>: The quick tip width (equivalent to the 'width' target element config).</li>
+</ul>
+
+
+<p>Here is an example of configuring an HTML element to display a tooltip from markup:</p>
+
+<pre class="prettyprint"><code>// Add a quick tip to an HTML button
+&amp;lt;input type="button" value="OK" ext:qtitle="OK Button" ext:qwidth="100"
+     data-qtip="This is a quick tip from markup!"&gt;&amp;lt;/input&gt;
+</code></pre>
+<div class="members"><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-destroy" class="member f ni"><a href="Ext.tip.QuickTipManager.html#method-destroy" rel="method-destroy" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.tip.QuickTipManager.html" class="definedIn docClass">Ext.tip.QuickTipManager</a><br/><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager-method-destroy" class="viewSource">view source</a></div><a name="destroy"></a><a name="method-destroy"></a><a href="Ext.tip.QuickTipManager.html#" rel="method-destroy" class="cls expand">destroy</a> : void</div><div class="description"><div class="short"><p>Destroy the QuickTips instance.</p>
+</div><div class="long"><p>Destroy the QuickTips instance.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-disable" class="member ni"><a href="Ext.tip.QuickTipManager.html#method-disable" rel="method-disable" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.tip.QuickTipManager.html" class="definedIn docClass">Ext.tip.QuickTipManager</a><br/><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager-method-disable" class="viewSource">view source</a></div><a name="disable"></a><a name="method-disable"></a><a href="Ext.tip.QuickTipManager.html#" rel="method-disable" class="cls expand">disable</a> : void</div><div class="description"><div class="short"><p>Disable quick tips globally.</p>
+</div><div class="long"><p>Disable quick tips globally.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-enable" class="member ni"><a href="Ext.tip.QuickTipManager.html#method-enable" rel="method-enable" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.tip.QuickTipManager.html" class="definedIn docClass">Ext.tip.QuickTipManager</a><br/><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager-method-enable" class="viewSource">view source</a></div><a name="enable"></a><a name="method-enable"></a><a href="Ext.tip.QuickTipManager.html#" rel="method-enable" class="cls expand">enable</a> : void</div><div class="description"><div class="short"><p>Enable quick tips globally.</p>
+</div><div class="long"><p>Enable quick tips globally.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-getQuickTip" class="member ni"><a href="Ext.tip.QuickTipManager.html#method-getQuickTip" rel="method-getQuickTip" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.tip.QuickTipManager.html" class="definedIn docClass">Ext.tip.QuickTipManager</a><br/><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager-method-getQuickTip" class="viewSource">view source</a></div><a name="getQuickTip"></a><a name="method-getQuickTip"></a><a href="Ext.tip.QuickTipManager.html#" rel="method-getQuickTip" class="cls expand">getQuickTip</a> : Ext.tip.QuickTip</div><div class="description"><div class="short"><p>Gets the single <a href="Ext.tip.QuickTip.html" rel="Ext.tip.QuickTip" class="docClass">QuickTip</a> instance used to show tips from all registered elements.</p>
+</div><div class="long"><p>Gets the single <a href="Ext.tip.QuickTip.html" rel="Ext.tip.QuickTip" class="docClass">QuickTip</a> instance used to show tips from all registered elements.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.tip.QuickTip</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-init" class="member ni"><a href="Ext.tip.QuickTipManager.html#method-init" rel="method-init" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.tip.QuickTipManager.html" class="definedIn docClass">Ext.tip.QuickTipManager</a><br/><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager-method-init" class="viewSource">view source</a></div><a name="init"></a><a name="method-init"></a><a href="Ext.tip.QuickTipManager.html#" rel="method-init" class="cls expand">init</a>(
+<span class="pre">Boolean autoRender</span>)
+ : void</div><div class="description"><div class="short"><p>Initialize the global QuickTips instance and prepare any quick tips.</p>
+</div><div class="long"><p>Initialize the global QuickTips instance and prepare any quick tips.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">autoRender</span> : Boolean<div class="sub-desc"><p>True to render the QuickTips container immediately to preload images. (Defaults to true)</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-isEnabled" class="member ni"><a href="Ext.tip.QuickTipManager.html#method-isEnabled" rel="method-isEnabled" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.tip.QuickTipManager.html" class="definedIn docClass">Ext.tip.QuickTipManager</a><br/><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager-method-isEnabled" class="viewSource">view source</a></div><a name="isEnabled"></a><a name="method-isEnabled"></a><a href="Ext.tip.QuickTipManager.html#" rel="method-isEnabled" class="cls expand">isEnabled</a> : Boolean</div><div class="description"><div class="short"><p>Returns true if quick tips are enabled, else false.</p>
+</div><div class="long"><p>Returns true if quick tips are enabled, else false.</p>
+<h3 class="pa">Returns</h3><ul><li><span class="pre">Boolean</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-register" class="member ni"><a href="Ext.tip.QuickTipManager.html#method-register" rel="method-register" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.tip.QuickTipManager.html" class="definedIn docClass">Ext.tip.QuickTipManager</a><br/><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager-method-register" class="viewSource">view source</a></div><a name="register"></a><a name="method-register"></a><a href="Ext.tip.QuickTipManager.html#" rel="method-register" class="cls expand">register</a>(
+<span class="pre">Object config</span>)
+ : void</div><div class="description"><div class="short"><p>Configures a new quick tip instance and assigns it to a target element.  See
+<a href="Ext.tip.QuickTip.html#register" rel="Ext.tip.QuickTip#register" class="docClass">Ext.tip.QuickTip.register</a> for details.</p>
+</div><div class="long"><p>Configures a new quick tip instance and assigns it to a target element.  See
+<a href="Ext.tip.QuickTip.html#register" rel="Ext.tip.QuickTip#register" class="docClass">Ext.tip.QuickTip.register</a> for details.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">config</span> : Object<div class="sub-desc"><p>The config object</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-tips" class="member ni"><a href="Ext.tip.QuickTipManager.html#method-tips" rel="method-tips" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.tip.QuickTipManager.html" class="definedIn docClass">Ext.tip.QuickTipManager</a><br/><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager-method-tips" class="viewSource">view source</a></div><a name="tips"></a><a name="method-tips"></a><a href="Ext.tip.QuickTipManager.html#" rel="method-tips" class="cls expand">tips</a>(
+<span class="pre">Object config</span>)
+ : void</div><div class="description"><div class="short"><p>Alias of <a href="Ext.tip.QuickTipManager.html#register" rel="Ext.tip.QuickTipManager#register" class="docClass">register</a>.</p>
+</div><div class="long"><p>Alias of <a href="Ext.tip.QuickTipManager.html#register" rel="Ext.tip.QuickTipManager#register" class="docClass">register</a>.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">config</span> : Object<div class="sub-desc"><p>The config object</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div><div id="method-unregister" class="member ni"><a href="Ext.tip.QuickTipManager.html#method-unregister" rel="method-unregister" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.tip.QuickTipManager.html" class="definedIn docClass">Ext.tip.QuickTipManager</a><br/><a href="../source/QuickTipManager.html#Ext-tip.QuickTipManager-method-unregister" class="viewSource">view source</a></div><a name="unregister"></a><a name="method-unregister"></a><a href="Ext.tip.QuickTipManager.html#" rel="method-unregister" class="cls expand">unregister</a>(
+<span class="pre">String/HTMLElement/Element el</span>)
+ : void</div><div class="description"><div class="short"><p>Removes any registered quick tip from the target element and destroys it.</p>
+</div><div class="long"><p>Removes any registered quick tip from the target element and destroys it.</p>
+<h3 class="pa">Parameters</h3><ul><li><span class="pre">el</span> : String/HTMLElement/Element<div class="sub-desc"><p>The element from which the quick tip is to be removed.</p>
+</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
+</li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>
\ No newline at end of file