+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-tip-ToolTip-method-constructor'><span id='Ext-tip-ToolTip'>/**
+</span></span> * @class Ext.tip.ToolTip
+ * @extends Ext.tip.Tip
+ *
+ * ToolTip is a {@link Ext.tip.Tip} implementation that handles the common case of displaying a
+ * tooltip when hovering over a certain element or elements on the page. It allows fine-grained
+ * control over the tooltip's alignment relative to the target element or mouse, and the timing
+ * of when it is automatically shown and hidden.
+ *
+ * This implementation does **not** have a built-in method of automatically populating the tooltip's
+ * text based on the target element; you must either configure a fixed {@link #html} value for each
+ * ToolTip instance, or implement custom logic (e.g. in a {@link #beforeshow} event listener) to
+ * generate the appropriate tooltip content on the fly. See {@link Ext.tip.QuickTip} for a more
+ * convenient way of automatically populating and configuring a tooltip based on specific DOM
+ * attributes of each target element.
+ *
+ * ## Basic Example
+ *
+ * var tip = Ext.create('Ext.tip.ToolTip', {
+ * target: 'clearButton',
+ * html: 'Press this button to clear the form'
+ * });
+ *
+ * {@img Ext.tip.ToolTip/Ext.tip.ToolTip1.png Basic Ext.tip.ToolTip}
+ *
+ * ## Delegation
+ *
+ * In addition to attaching a ToolTip to a single element, you can also use delegation to attach
+ * one ToolTip to many elements under a common parent. This is more efficient than creating many
+ * ToolTip instances. To do this, point the {@link #target} config to a common ancestor of all the
+ * elements, and then set the {@link #delegate} config to a CSS selector that will select all the
+ * appropriate sub-elements.
+ *
+ * When using delegation, it is likely that you will want to programmatically change the content
+ * of the ToolTip based on each delegate element; you can do this by implementing a custom
+ * listener for the {@link #beforeshow} event. Example:
+ *
+ * var myGrid = Ext.create('Ext.grid.GridPanel', gridConfig);
+ * myGrid.on('render', function(grid) {
+ * var view = grid.getView(); // Capture the grid's view.
+ * grid.tip = Ext.create('Ext.tip.ToolTip', {
+ * target: view.el, // The overall target element.
+ * delegate: view.itemSelector, // Each grid row causes its own seperate show and hide.
+ * trackMouse: true, // Moving within the row should not hide the tip.
+ * renderTo: Ext.getBody(), // Render immediately so that tip.body can be referenced prior to the first show.
+ * listeners: { // Change content dynamically depending on which element triggered the show.
+ * beforeshow: function updateTipBody(tip) {
+ * tip.update('Over company "' + view.getRecord(tip.triggerElement).get('company') + '"');
+ * }
+ * }
+ * });
+ * });
+ *
+ * {@img Ext.tip.ToolTip/Ext.tip.ToolTip2.png Ext.tip.ToolTip with delegation}
+ *
+ * ## Alignment
+ *
+ * The following configuration properties allow control over how the ToolTip is aligned relative to
+ * the target element and/or mouse pointer:
+ *
+ * - {@link #anchor}
+ * - {@link #anchorToTarget}
+ * - {@link #anchorOffset}
+ * - {@link #trackMouse}
+ * - {@link #mouseOffset}
+ *
+ * ## Showing/Hiding
+ *
+ * The following configuration properties allow control over how and when the ToolTip is automatically
+ * shown and hidden:
+ *
+ * - {@link #autoHide}
+ * - {@link #showDelay}
+ * - {@link #hideDelay}
+ * - {@link #dismissDelay}
+ *
git.ithinksw.org / extjs.git / blobdiff