docs/api/Ext.tip.QuickTipManager.html

   1 <!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]>
   2 <style type="text/css">.head-band { display: none; }
   3 .header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
   4 .doc-tab .members .member a.more { background-color: #efefef; }
   5 </style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
   6 </head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit
   7 <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">
   8
   9     req = {
  10         liveURL: '.',
  11         standAloneMode: true,
  12         origDocClass: 'Ext.tip.QuickTipManager',
  13         docClass: 'Ext.tip.QuickTipManager',
  14         docReq: 'Ext.tip.QuickTipManager',
  15         version: '4.0',
  16         baseURL: '.',
  17         baseDocURL: '.',
  18         baseProdURL: '.'
  19     };
  20
  21     clsInfo = {};
  22
  23
  24
  25 </script>
  26
  27 <script type="text/javascript" src="../search.js"></script>
  28 <!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
  29 <script type="text/javascript" src="../class_tree.js"></script>
  30 <script type="text/javascript" src="../class_doc.js"></script>
  31 <script type="text/javascript">
  32     req.source = 'QuickTipManager.html#Ext-tip.QuickTipManager';
  33     clsInfo = {"methods":["destroy","disable","enable","getQuickTip","init","isEnabled","register","tips","unregister"],"cfgs":[],"properties":[],"events":[],"subclasses":[]};
  34     Ext.onReady(function() {
  35         Ext.create('Docs.classPanel');
  36     });
  37 </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
  38 singleton is used to configure and manage tooltips globally for multiple elements
  39 in a generic manner.  To create individual tooltips with maximum customizability,
  40 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>
  41
  42 <p>Quicktips can be configured via tag attributes directly in markup, or by
  43 registering quick tips programmatically via the <a href="Ext.tip.QuickTipManager.html#register" rel="Ext.tip.QuickTipManager#register" class="docClass">register</a> method.</p>
  44
  45 <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
  46 <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
  47 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
  48 tooltips shown by the singleton.</p>
  49
  50 <p>Below is the summary of the configuration properties which can be used.
  51 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>
  52
  53 <h2>QuickTips singleton configs (all are optional)</h2>
  54
  55 <ul>
  56 <li><code>dismissDelay</code></li>
  57 <li><code>hideDelay</code></li>
  58 <li><code>maxWidth</code></li>
  59 <li><code>minWidth</code></li>
  60 <li><code>showDelay</code></li>
  61 <li><code>trackMouse</code></li>
  62 </ul>
  63
  64
  65 <h2>Target element configs (optional unless otherwise noted)</h2>
  66
  67 <ul>
  68 <li><code>autoHide</code></li>
  69 <li><code>cls</code></li>
  70 <li><code>dismissDelay</code> (overrides singleton value)</li>
  71 <li><code>target</code> (required)</li>
  72 <li><code>text</code> (required)</li>
  73 <li><code>title</code></li>
  74 <li><code>width</code></li>
  75 </ul>
  76
  77
  78 <p>Here is an example showing how some of these config options could be used:</p>
  79
  80 <p><img class="screenshot" src="../Ext.tip.QuickTipManager.png" alt="Ext.tip.QuickTipManager component" /></p>
  81
  82 <h2>Code</h2>
  83
  84 <pre class="prettyprint"><code>// Init the singleton.  Any tag-based quick tips will start working.
  85 Ext.tip.QuickTipManager.init();
  86
  87 // Apply a set of config properties to the singleton
  88 Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), {
  89     maxWidth: 200,
  90     minWidth: 100,
  91     showDelay: 50      // Show 50ms after entering target
  92 });
  93
  94 // Create a small panel to add a quick tip to
  95 Ext.create('Ext.container.Container', {
  96     id: 'quickTipContainer',
  97     width: 200,
  98     height: 150,
  99     style: {
 100         backgroundColor:'#000000'
 101     },
 102     renderTo: Ext.getBody()
 103 });
 104
 105
 106 // Manually register a quick tip for a specific element
 107 Ext.tip.QuickTipManager.register({
 108     target: 'quickTipContainer',
 109     title: 'My Tooltip',
 110     text: 'This tooltip was added in code',
 111     width: 100,
 112     dismissDelay: 10000 // Hide after 10 seconds hover
 113 });
 114 </code></pre>
 115
 116 <p>To register a quick tip in markup, you simply add one or more of the valid QuickTip attributes prefixed with
 117 the <strong>ext</strong> namespace.  The HTML element itself is automatically set as the quick tip target. Here is the summary
 118 of supported attributes (optional unless otherwise noted):</p>
 119
 120 <ul>
 121 <li><code>hide</code>: Specifying "user" is equivalent to setting autoHide = false.  Any other value will be the same as autoHide = true.</li>
 122 <li><code>qclass</code>: A CSS class to be applied to the quick tip (equivalent to the 'cls' target element config).</li>
 123 <li><code>qtip (required)</code>: The quick tip text (equivalent to the 'text' target element config).</li>
 124 <li><code>qtitle</code>: The quick tip title (equivalent to the 'title' target element config).</li>
 125 <li><code>qwidth</code>: The quick tip width (equivalent to the 'width' target element config).</li>
 126 </ul>
 127
 128
 129 <p>Here is an example of configuring an HTML element to display a tooltip from markup:</p>
 130
 131 <pre class="prettyprint"><code>// Add a quick tip to an HTML button
 132 &amp;lt;input type="button" value="OK" ext:qtitle="OK Button" ext:qwidth="100"
 133      data-qtip="This is a quick tip from markup!"&gt;&amp;lt;/input&gt;
 134 </code></pre>
 135 <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>
 136 </div><div class="long"><p>Destroy the QuickTips instance.</p>
 137 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 138 </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>
 139 </div><div class="long"><p>Disable quick tips globally.</p>
 140 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 141 </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>
 142 </div><div class="long"><p>Enable quick tips globally.</p>
 143 <h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 144 </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>
 145 </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>
 146 <h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.tip.QuickTip</span>&nbsp; &nbsp;
 147 </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>(
 148 <span class="pre">Boolean autoRender</span>)
 149  : void</div><div class="description"><div class="short"><p>Initialize the global QuickTips instance and prepare any quick tips.</p>
 150 </div><div class="long"><p>Initialize the global QuickTips instance and prepare any quick tips.</p>
 151 <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>
 152 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 153 </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>
 154 </div><div class="long"><p>Returns true if quick tips are enabled, else false.</p>
 155 <h3 class="pa">Returns</h3><ul><li><span class="pre">Boolean</span>&nbsp; &nbsp;
 156 </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>(
 157 <span class="pre">Object config</span>)
 158  : void</div><div class="description"><div class="short"><p>Configures a new quick tip instance and assigns it to a target element.  See
 159 <a href="Ext.tip.QuickTip.html#register" rel="Ext.tip.QuickTip#register" class="docClass">Ext.tip.QuickTip.register</a> for details.</p>
 160 </div><div class="long"><p>Configures a new quick tip instance and assigns it to a target element.  See
 161 <a href="Ext.tip.QuickTip.html#register" rel="Ext.tip.QuickTip#register" class="docClass">Ext.tip.QuickTip.register</a> for details.</p>
 162 <h3 class="pa">Parameters</h3><ul><li><span class="pre">config</span> : Object<div class="sub-desc"><p>The config object</p>
 163 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 164 </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>(
 165 <span class="pre">Object config</span>)
 166  : 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>
 167 </div><div class="long"><p>Alias of <a href="Ext.tip.QuickTipManager.html#register" rel="Ext.tip.QuickTipManager#register" class="docClass">register</a>.</p>
 168 <h3 class="pa">Parameters</h3><ul><li><span class="pre">config</span> : Object<div class="sub-desc"><p>The config object</p>
 169 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 170 </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>(
 171 <span class="pre">String/HTMLElement/Element el</span>)
 172  : void</div><div class="description"><div class="short"><p>Removes any registered quick tip from the target element and destroys it.</p>
 173 </div><div class="long"><p>Removes any registered quick tip from the target element and destroys it.</p>
 174 <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>
 175 </div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">void</span>&nbsp; &nbsp;
 176 </li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>