+// Show the tip at x:50 and y:100
+tip.showAt([50,100]);
+
+// Show the tip at the default position ('tl-br?')
+tip.showBy('my-el');
+
+// Show the tip's top-left corner anchored to the element's top-right corner
+tip.showBy('my-el', 'tl-tr');
+Optional. A {@link Ext.DomQuery DomQuery} selector which allows selection of individual elements + * within the {@link #target} element to trigger showing and hiding the ToolTip as the mouse moves within the target.
+ *When specified, the child element of the target which caused a show event is placed into the {@link #triggerElement} property + * before the ToolTip is shown.
+ *This may be useful when a Component has regular, repeating elements in it, each of which need a Tooltip which contains + * information specific to that element. For example:
+var myGrid = new Ext.grid.gridPanel(gridConfig);
+myGrid.on('render', function(grid) {
+ var store = grid.getStore(); // Capture the Store.
+ var view = grid.getView(); // Capture the GridView.
+ myGrid.tip = new Ext.ToolTip({
+ target: view.mainBody, // The overall target element.
+ delegate: '.x-grid3-row', // Each grid row causes its own seperate show and hide.
+ trackMouse: true, // Moving within the row should not hide the tip.
+ renderTo: document.body, // 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) {
+ var rowIndex = view.findRowIndex(tip.triggerElement);
+ tip.body.dom.innerHTML = "Over Record ID " + store.getAt(rowIndex).id;
+ }
+ }
+ });
+});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}.
+ *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 + * {@link #getQuickTip}, and supports all the methods, and all the all the + * configuration properties of Ext.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 {@link #getQuickTip}
+ *QuickTips singleton configs (all are optional)
+ *Target element configs (optional unless otherwise noted)
+ *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,
+ 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: 20
+});
+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 + * of supported attributes (optional unless otherwise noted):
+ *Here is an example of configuring an HTML element to display a tooltip from markup:
+ *
+// 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>
+