-// 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');
-{@link #delegate}
- * option to cause selected child elements of the {@link #target}
- * Element to each trigger a seperate show event, this property is set to
- * the DOM element which triggered the show.
- * @type DOMElement
- * @property triggerElement
- */
- /**
- * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to monitor
- * for mouseover events to trigger showing this ToolTip.
- */
- /**
- * @cfg {Boolean} autoHide True to automatically hide the tooltip after the
- * mouse exits the target element or after the {@link #dismissDelay}
- * has expired if set (defaults to true). If {@link closable} = true
- * a close tool button will be rendered into the tooltip header.
- */
- /**
- * @cfg {Number} showDelay Delay in milliseconds before the tooltip displays
- * after the mouse enters the target element (defaults to 500)
- */
- showDelay : 500,
- /**
- * @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the
- * target element but before the tooltip actually hides (defaults to 200).
- * Set to 0 for the tooltip to hide immediately.
- */
- hideDelay : 200,
- /**
- * @cfg {Number} dismissDelay Delay in milliseconds before the tooltip
- * automatically hides (defaults to 5000). To disable automatic hiding, set
- * dismissDelay = 0.
- */
- dismissDelay : 5000,
- /**
- * @cfg {Array} mouseOffset An XY offset from the mouse position where the
- * tooltip should be shown (defaults to [15,18]).
- */
- /**
- * @cfg {Boolean} trackMouse True to have the tooltip follow the mouse as it
- * moves over the target element (defaults to false).
- */
- trackMouse : false,
- /**
- * @cfg {Boolean} anchorToTarget True to anchor the tooltip to the target
- * element, false to anchor it relative to the mouse coordinates (defaults
- * to true). When anchorToTarget is true, use
- * {@link #defaultAlign} to control tooltip alignment to the
- * target element. When anchorToTarget is false, use
- * {@link #anchorPosition} instead to control alignment.
- */
- anchorToTarget : true,
- /**
- * @cfg {Number} anchorOffset A numeric pixel value used to offset the
- * default position of the anchor arrow (defaults to 0). When the anchor
- * position is on the top or bottom of the tooltip, anchorOffset
- * will be used as a horizontal offset. Likewise, when the anchor position
- * is on the left or right side, anchorOffset will be used as
- * a vertical offset.
- */
- anchorOffset : 0,
- /**
- * @cfg {String} delegate 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>
-
+// 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');
+{@link #delegate}
+ * option to cause selected child elements of the {@link #target}
+ * Element to each trigger a seperate show event, this property is set to
+ * the DOM element which triggered the show.
+ * @type DOMElement
+ * @property triggerElement
+ */
+ /**
+ * @cfg {Mixed} target The target HTMLElement, Ext.Element or id to monitor
+ * for mouseover events to trigger showing this ToolTip.
+ */
+ /**
+ * @cfg {Boolean} autoHide True to automatically hide the tooltip after the
+ * mouse exits the target element or after the {@link #dismissDelay}
+ * has expired if set (defaults to true). If {@link closable} = true
+ * a close tool button will be rendered into the tooltip header.
+ */
+ /**
+ * @cfg {Number} showDelay Delay in milliseconds before the tooltip displays
+ * after the mouse enters the target element (defaults to 500)
+ */
+ showDelay : 500,
+ /**
+ * @cfg {Number} hideDelay Delay in milliseconds after the mouse exits the
+ * target element but before the tooltip actually hides (defaults to 200).
+ * Set to 0 for the tooltip to hide immediately.
+ */
+ hideDelay : 200,
+ /**
+ * @cfg {Number} dismissDelay Delay in milliseconds before the tooltip
+ * automatically hides (defaults to 5000). To disable automatic hiding, set
+ * dismissDelay = 0.
+ */
+ dismissDelay : 5000,
+ /**
+ * @cfg {Array} mouseOffset An XY offset from the mouse position where the
+ * tooltip should be shown (defaults to [15,18]).
+ */
+ /**
+ * @cfg {Boolean} trackMouse True to have the tooltip follow the mouse as it
+ * moves over the target element (defaults to false).
+ */
+ trackMouse : false,
+ /**
+ * @cfg {Boolean} anchorToTarget True to anchor the tooltip to the target
+ * element, false to anchor it relative to the mouse coordinates (defaults
+ * to true). When anchorToTarget is true, use
+ * {@link #defaultAlign} to control tooltip alignment to the
+ * target element. When anchorToTarget is false, use
+ * {@link #anchorPosition} instead to control alignment.
+ */
+ anchorToTarget : true,
+ /**
+ * @cfg {Number} anchorOffset A numeric pixel value used to offset the
+ * default position of the anchor arrow (defaults to 0). When the anchor
+ * position is on the top or bottom of the tooltip, anchorOffset
+ * will be used as a horizontal offset. Likewise, when the anchor position
+ * is on the left or right side, anchorOffset will be used as
+ * a vertical offset.
+ */
+ anchorOffset : 0,
+ /**
+ * @cfg {String} delegate 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>
+
+new Ext.Slider({
+ width: 214,
+ minValue: 0,
+ maxValue: 100,
+ plugins: new Ext.slider.Tip()
+});
+
+ * Optionally provide your own tip text by overriding getText:
+
+ new Ext.Slider({
+ width: 214,
+ minValue: 0,
+ maxValue: 100,
+ plugins: new Ext.slider.Tip({
+ getText: function(thumb){
+ return String.format('{0}% complete', thumb.value);
+ }
+ })
+ });
+
+ */
+Ext.slider.Tip = Ext.extend(Ext.Tip, {
+ minWidth: 10,
+ offsets : [0, -10],
+
+ init: function(slider) {
+ slider.on({
+ scope : this,
+ dragstart: this.onSlide,
+ drag : this.onSlide,
+ dragend : this.hide,
+ destroy : this.destroy
+ });
+ },
+
+ /**
+ * @private
+ * Called whenever a dragstart or drag event is received on the associated Thumb.
+ * Aligns the Tip with the Thumb's new position.
+ * @param {Ext.slider.MultiSlider} slider The slider
+ * @param {Ext.EventObject} e The Event object
+ * @param {Ext.slider.Thumb} thumb The thumb that the Tip is attached to
+ */
+ onSlide : function(slider, e, thumb) {
+ this.show();
+ this.body.update(this.getText(thumb));
+ this.doAutoWidth();
+ this.el.alignTo(thumb.el, 'b-t?', this.offsets);
+ },
+
+ /**
+ * Used to create the text that appears in the Tip's body. By default this just returns
+ * the value of the Slider Thumb that the Tip is attached to. Override to customize.
+ * @param {Ext.slider.Thumb} thumb The Thumb that the Tip is attached to
+ * @return {String} The text to display in the tip
+ */
+ getText : function(thumb) {
+ return String(thumb.value);
+ }
+});
+
+//backwards compatibility - SliderTip used to be a ux before 3.2
+Ext.ux.SliderTip = Ext.slider.Tip;
\ No newline at end of file