docs/output/Ext.QuickTips.html

   1         <div class="body-wrap">
   2         <div class="top-tools">
   3             <a class="inner-link" href="#Ext.QuickTips-props"><img src="../resources/images/default/s.gif" class="item-icon icon-prop">Properties</a>
   4             <a class="inner-link" href="#Ext.QuickTips-methods"><img src="../resources/images/default/s.gif" class="item-icon icon-method">Methods</a>
   5             <a class="inner-link" href="#Ext.QuickTips-events"><img src="../resources/images/default/s.gif" class="item-icon icon-event">Events</a>
   6                         <a class="bookmark" href="../docs/?class=Ext.QuickTips"><img src="../resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a>
   7         </div>
   8                 <h1>Class Ext.QuickTips</h1>
   9         <table cellspacing="0">
  10             <tr><td class="label">Package:</td><td class="hd-info">Ext</td></tr>
  11             <tr><td class="label">Defined In:</td><td class="hd-info"><a href="../src/QuickTips.js" target="_blank">QuickTips.js</a></td></tr>
  12             <tr><td class="label">Class:</td><td class="hd-info">QuickTips</td></tr>
  13                                     <tr><td class="label">Extends:</td><td class="hd-info">Object</td></tr>
  14                     </table>
  15         <div class="description">
  16             *
  17 <p>Provides attractive and customizable tooltips for any element. The QuickTips
  18 singleton is used to configure and manage tooltips globally for multiple elements
  19 in a generic manner.  To create individual tooltips with maximum customizability,
  20 you should consider either <a ext:cls="Ext.Tip" href="output/Ext.Tip.html">Ext.Tip</a> or <a ext:cls="Ext.ToolTip" href="output/Ext.ToolTip.html">Ext.ToolTip</a>.</p>
  21 <p>Quicktips can be configured via tag attributes directly in markup, or by
  22 registering quick tips programmatically via the <a ext:cls="Ext.QuickTips" ext:member="register" href="output/Ext.QuickTips.html#register">register</a> method.</p>
  23 <p>The singleton's instance of <a ext:cls="Ext.QuickTip" href="output/Ext.QuickTip.html">Ext.QuickTip</a> is available via
  24 <a ext:cls="Ext.QuickTips" ext:member="getQuickTip" href="output/Ext.QuickTips.html#getQuickTip">getQuickTip</a>, and supports all the methods, and all the all the
  25 configuration properties of Ext.QuickTip. These settings will apply to all
  26 tooltips shown by the singleton.</p>
  27 <p>Below is the summary of the configuration properties which can be used.
  28 For detailed descriptions see <a ext:cls="Ext.QuickTips" ext:member="getQuickTip" href="output/Ext.QuickTips.html#getQuickTip">getQuickTip</a></p>
  29 <p><b>QuickTips singleton configs (all are optional)</b></p>
  30 <div class="mdetail-params"><ul><li>dismissDelay</li>
  31 <li>hideDelay</li>
  32 <li>maxWidth</li>
  33 <li>minWidth</li>
  34 <li>showDelay</li>
  35 <li>trackMouse</li></ul></div>
  36 <p><b>Target element configs (optional unless otherwise noted)</b></p>
  37 <div class="mdetail-params"><ul><li>autoHide</li>
  38 <li>cls</li>
  39 <li>dismissDelay (overrides singleton value)</li>
  40 <li>target (required)</li>
  41 <li>text (required)</li>
  42 <li>title</li>
  43 <li>width</li></ul></div>
  44 <p>Here is an example showing how some of these config options could be used:</p>
  45 <pre><code><i>// Init the singleton.  Any tag-based quick tips will start working.</i>
  46 Ext.QuickTips.init();
  47
  48 <i>// Apply a set of config properties to the singleton</i>
  49 Ext.apply(Ext.QuickTips.getQuickTip(), {
  50     maxWidth: 200,
  51     minWidth: 100,
  52     showDelay: 50,
  53     trackMouse: true
  54 });
  55
  56 <i>// Manually register a quick tip <b>for</b> a specific element</i>
  57 Ext.QuickTips.register({
  58     target: <em>'my-div'</em>,
  59     title: <em>'My Tooltip'</em>,
  60     text: <em>'This tooltip was added <b>in</b> code'</em>,
  61     width: 100,
  62     dismissDelay: 20
  63 });</code></pre>
  64 <p>To register a quick tip in markup, you simply add one or more of the valid QuickTip attributes prefixed with
  65 the <b>ext:</b> namespace.  The HTML element itself is automatically set as the quick tip target. Here is the summary
  66 of supported attributes (optional unless otherwise noted):</p>
  67 <ul><li><b>hide</b>: Specifying "user" is equivalent to setting autoHide = false.  Any other value will be the
  68 same as autoHide = true.</li>
  69 <li><b>qclass</b>: A CSS class to be applied to the quick tip (equivalent to the 'cls' target element config).</li>
  70 <li><b>qtip (required)</b>: The quick tip text (equivalent to the 'text' target element config).</li>
  71 <li><b>qtitle</b>: The quick tip title (equivalent to the 'title' target element config).</li>
  72 <li><b>qwidth</b>: The quick tip width (equivalent to the 'width' target element config).</li></ul>
  73 <p>Here is an example of configuring an HTML element to display a tooltip from markup:</p>
  74 <pre><code><i>// Add a quick tip to an HTML button</i>
  75 &lt;input type=<em>"button"</em> value=<em>"OK"</em> ext:qtitle=<em>"OK Button"</em> ext:qwidth=<em>"100"</em>
  76      ext:qtip=<em>"This is a quick tip from markup!"</em>>&lt;/input></code></pre><br><br><i>This class is a singleton and cannot be created directly.</i>        </div>
  77
  78         <div class="hr"></div>
  79                 <a id="Ext.QuickTips-props"></a>
  80         <h2>Public Properties</h2>
  81         <div class="no-members">This class has no public properties.</div>        <a id="Ext.QuickTips-methods"></a>
  82         <h2>Public Methods</h2>
  83                 <table cellspacing="0" class="member-table">
  84             <tr>
  85                 <th class="sig-header" colspan="2">Method</th>
  86                 <th class="msource-header">Defined By</th>
  87             </tr>
  88                 <tr class="method-row expandable">\r
  89         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
  90         <td class="sig">\r
  91         <a id="Ext.QuickTips-disable"></a>\r
  92             <b>disable</b>() : void            <div class="mdesc">\r
  93                         <div class="short">Disable quick tips globally.</div>\r
  94             <div class="long">\r
  95                 Disable quick tips globally.    <div class="mdetail-params">\r
  96         <strong>Parameters:</strong>\r
  97         <ul><li>None.</li>        </ul>\r
  98         <strong>Returns:</strong>\r
  99         <ul>\r
 100             <li><code>void</code></li>\r
 101         </ul>\r
 102     </div>\r
 103                 </div>\r
 104                         </div>\r
 105         </td>\r
 106         <td class="msource">QuickTips</td>\r
 107     </tr>\r
 108         <tr class="method-row alt expandable">\r
 109         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 110         <td class="sig">\r
 111         <a id="Ext.QuickTips-enable"></a>\r
 112             <b>enable</b>() : void            <div class="mdesc">\r
 113                         <div class="short">Enable quick tips globally.</div>\r
 114             <div class="long">\r
 115                 Enable quick tips globally.    <div class="mdetail-params">\r
 116         <strong>Parameters:</strong>\r
 117         <ul><li>None.</li>        </ul>\r
 118         <strong>Returns:</strong>\r
 119         <ul>\r
 120             <li><code>void</code></li>\r
 121         </ul>\r
 122     </div>\r
 123                 </div>\r
 124                         </div>\r
 125         </td>\r
 126         <td class="msource">QuickTips</td>\r
 127     </tr>\r
 128         <tr class="method-row expandable">\r
 129         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 130         <td class="sig">\r
 131         <a id="Ext.QuickTips-getQuickTip"></a>\r
 132             <b>getQuickTip</b>() : void            <div class="mdesc">\r
 133                         <div class="short">Gets the global QuickTips instance.</div>\r
 134             <div class="long">\r
 135                 Gets the global QuickTips instance.    <div class="mdetail-params">\r
 136         <strong>Parameters:</strong>\r
 137         <ul><li>None.</li>        </ul>\r
 138         <strong>Returns:</strong>\r
 139         <ul>\r
 140             <li><code>void</code></li>\r
 141         </ul>\r
 142     </div>\r
 143                 </div>\r
 144                         </div>\r
 145         </td>\r
 146         <td class="msource">QuickTips</td>\r
 147     </tr>\r
 148         <tr class="method-row alt expandable">\r
 149         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 150         <td class="sig">\r
 151         <a id="Ext.QuickTips-init"></a>\r
 152             <b>init</b>(&nbsp;<code>Boolean autoRender</code>&nbsp;) : void            <div class="mdesc">\r
 153                         <div class="short">Initialize the global QuickTips instance and prepare any quick tips.</div>\r
 154             <div class="long">\r
 155                 Initialize the global QuickTips instance and prepare any quick tips.    <div class="mdetail-params">\r
 156         <strong>Parameters:</strong>\r
 157         <ul><li><code>autoRender</code> : Boolean<div class="sub-desc">True to render the QuickTips container immediately to preload images. (Defaults to true)</div></li>        </ul>\r
 158         <strong>Returns:</strong>\r
 159         <ul>\r
 160             <li><code>void</code></li>\r
 161         </ul>\r
 162     </div>\r
 163                 </div>\r
 164                         </div>\r
 165         </td>\r
 166         <td class="msource">QuickTips</td>\r
 167     </tr>\r
 168         <tr class="method-row expandable">\r
 169         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 170         <td class="sig">\r
 171         <a id="Ext.QuickTips-isEnabled"></a>\r
 172             <b>isEnabled</b>() : Boolean            <div class="mdesc">\r
 173                         <div class="short">Returns true if quick tips are enabled, else false.</div>\r
 174             <div class="long">\r
 175                 Returns true if quick tips are enabled, else false.    <div class="mdetail-params">\r
 176         <strong>Parameters:</strong>\r
 177         <ul><li>None.</li>        </ul>\r
 178         <strong>Returns:</strong>\r
 179         <ul>\r
 180             <li><code>Boolean</code></li>\r
 181         </ul>\r
 182     </div>\r
 183                 </div>\r
 184                         </div>\r
 185         </td>\r
 186         <td class="msource">QuickTips</td>\r
 187     </tr>\r
 188         <tr class="method-row alt expandable">\r
 189         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 190         <td class="sig">\r
 191         <a id="Ext.QuickTips-register"></a>\r
 192             <b>register</b>(&nbsp;<code>Object config</code>&nbsp;) : void            <div class="mdesc">\r
 193                         <div class="short">Configures a new quick tip instance and assigns it to a target element.  See
 194 <a ext:cls="Ext.QuickTip" ext:member="register" href="output/Ext.QuickTip.html#register">Ext.QuickTip.register</a> for details.</div>\r
 195             <div class="long">\r
 196                 Configures a new quick tip instance and assigns it to a target element.  See
 197 <a ext:cls="Ext.QuickTip" ext:member="register" href="output/Ext.QuickTip.html#register">Ext.QuickTip.register</a> for details.    <div class="mdetail-params">\r
 198         <strong>Parameters:</strong>\r
 199         <ul><li><code>config</code> : Object<div class="sub-desc">The config object</div></li>        </ul>\r
 200         <strong>Returns:</strong>\r
 201         <ul>\r
 202             <li><code>void</code></li>\r
 203         </ul>\r
 204     </div>\r
 205                 </div>\r
 206                         </div>\r
 207         </td>\r
 208         <td class="msource">QuickTips</td>\r
 209     </tr>\r
 210         <tr class="method-row expandable">\r
 211         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 212         <td class="sig">\r
 213         <a id="Ext.QuickTips-tips"></a>\r
 214             <b>tips</b>(&nbsp;<code>Object config</code>&nbsp;) : void            <div class="mdesc">\r
 215                         <div class="short">Alias of <a ext:cls="Ext.QuickTips" ext:member="register" href="output/Ext.QuickTips.html#register">register</a>.</div>\r
 216             <div class="long">\r
 217                 Alias of <a ext:cls="Ext.QuickTips" ext:member="register" href="output/Ext.QuickTips.html#register">register</a>.    <div class="mdetail-params">\r
 218         <strong>Parameters:</strong>\r
 219         <ul><li><code>config</code> : Object<div class="sub-desc">The config object</div></li>        </ul>\r
 220         <strong>Returns:</strong>\r
 221         <ul>\r
 222             <li><code>void</code></li>\r
 223         </ul>\r
 224     </div>\r
 225                 </div>\r
 226                         </div>\r
 227         </td>\r
 228         <td class="msource">QuickTips</td>\r
 229     </tr>\r
 230         <tr class="method-row alt expandable">\r
 231         <td class="micon"><a class="exi" href="#expand">&nbsp;</a></td>\r
 232         <td class="sig">\r
 233         <a id="Ext.QuickTips-unregister"></a>\r
 234             <b>unregister</b>(&nbsp;<code>String/HTMLElement/Element el</code>&nbsp;) : void            <div class="mdesc">\r
 235                         <div class="short">Removes any registered quick tip from the target element and destroys it.</div>\r
 236             <div class="long">\r
 237                 Removes any registered quick tip from the target element and destroys it.    <div class="mdetail-params">\r
 238         <strong>Parameters:</strong>\r
 239         <ul><li><code>el</code> : String/HTMLElement/Element<div class="sub-desc">The element from which the quick tip is to be removed.</div></li>        </ul>\r
 240         <strong>Returns:</strong>\r
 241         <ul>\r
 242             <li><code>void</code></li>\r
 243         </ul>\r
 244     </div>\r
 245                 </div>\r
 246                         </div>\r
 247         </td>\r
 248         <td class="msource">QuickTips</td>\r
 249     </tr>\r
 250             </table>
 251                 <a id="Ext.QuickTips-events"></a>
 252         <h2>Public Events</h2>
 253         <div class="no-members">This class has no public events.</div>
 254         </div>