// 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 the config options for the {@link Ext.QuickTip QuickTip} class
*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, // Show 50ms after entering target
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: 10000 // Hide after 10 seconds hover
});
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;