Clear Up
SharpKit Reference

QuickTipManager Class

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 Ext.tip.Tip or Ext.tip.ToolTip.

Quicktips can be configured via tag attributes directly in markup, or by registering quick tips programmatically via the register method.

The singleton's instance of Ext.tip.QuickTip is available via getQuickTip, and supports all the methods, and all the all the configuration properties of Ext.tip.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 QuickTip class

QuickTips singleton configs (all are optional)

  • dismissDelay
  • hideDelay
  • maxWidth
  • minWidth
  • showDelay
  • trackMouse

Target element configs (optional unless otherwise noted)

  • autoHide
  • cls
  • dismissDelay (overrides singleton value)
  • target (required)
  • text (required)
  • title
  • width

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.
            // Apply a set of config properties to the singleton
            Ext.apply(Ext.tip.QuickTipManager.getQuickTip(), {
            maxWidth: 200,
            minWidth: 100,
            showDelay: 50      // Show 50ms after entering target
            // Create a small panel to add a quick tip to
            Ext.create('Ext.container.Container', {
            id: 'quickTipContainer',
            width: 200,
            height: 150,
            style: {
            renderTo: Ext.getBody()
            // Manually register a quick tip for a specific element
            target: 'quickTipContainer',
            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 data- namespace. The HTML element itself is automatically set as the quick tip target. Here is the summary of supported attributes (optional unless otherwise noted):

  • hide: Specifying "user" is equivalent to setting autoHide = false. Any other value will be the same as autoHide = true.
  • qclass: A CSS class to be applied to the quick tip (equivalent to the 'cls' target element config).
  • qtip (required): The quick tip text (equivalent to the 'text' target element config).
  • qtitle: The quick tip title (equivalent to the 'title' target element config).
  • qwidth: The quick tip width (equivalent to the 'width' target element config).

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" data-qtitle="OK Button" data-qwidth="100"
            data-qtip="This is a quick tip from markup!"></input>

Namespace: Ext.tip

Base Types


Name Description
callOverridden(object) Call the original method that was previously overridden with override
  Ext.define('My.Cat', {
            constructor: function() {
            alert("I'm a cat!");
            constructor: function() {
            alert("I'm going to be a cat!");
            var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
            // alerts "I'm a cat!"
            // alerts "Meeeeoooowwww"

This method has been deprecated

as of 4.1. Use callParent instead.

callParent(object) Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).
  Ext.define('My.Base', {
            constructor: function (x) {
            this.x = x;
            statics: {
            method: function (x) {
            return x;
            Ext.define('My.Derived', {
            extend: 'My.Base',
            constructor: function () {
            var obj = new My.Derived();
            alert(obj.x);  // alerts 21
This can be used with an override as follows:
  Ext.define('My.DerivedOverride', {
            override: 'My.Derived',
            constructor: function (x) {
            this.callParent([x*2]); // calls original My.Derived constructor
            var obj = new My.Derived();
            alert(obj.x);  // now alerts 42
This also works with static methods.
  Ext.define('My.Derived2', {
            extend: 'My.Base',
            statics: {
            method: function (x) {
            return this.callParent([x*2]); // calls My.Base.method
            alert(My.Base.method(10);     // alerts 10
            alert(My.Derived2.method(10); // alerts 20
Lastly, it also works with overridden static methods.
  Ext.define('My.Derived2Override', {
            override: 'My.Derived2',
            statics: {
            method: function (x) {
            return this.callParent([x*2]); // calls My.Derived2.method
            alert(My.Derived2.method(10); // now alerts 40
destroy() Destroys the QuickTips instance. Overrides: Ext.Base.destroy
disable() Disables quick tips globally.
enable() Enables quick tips globally.
getInitialConfig(object) Returns the initial configuration passed to constructor when instantiating this class.
getQuickTip() Gets the single QuickTip instance used to show tips from all registered elements.
init(object, object) Initializes the global QuickTips instance and prepare any quick tips.
initConfig(object) Initialize configuration for this class. a typical example:
  Ext.define('My.awesome.Class', {
            // The default config
            config: {
            name: 'Awesome',
            isAwesome: true
            constructor: function(config) {
            var awesome = new My.awesome.Class({
            name: 'Super Awesome'
            alert(awesome.getName()); // 'Super Awesome'
isEnabled() Returns true if quick tips are enabled, else false.
register(object) Configures a new quick tip instance and assigns it to a target element. See Ext.tip.QuickTip.register for details.
statics() Get the reference to the class from which this object was instantiated. Note that unlike self, this.statics() is scope-independent and it always returns the class from which it was called, regardless of what this points to during run-time
  Ext.define('My.Cat', {
            statics: {
            totalCreated: 0,
            speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
            constructor: function() {
            var statics = this.statics();
            alert(statics.speciesName);     // always equals to 'Cat' no matter what 'this' refers to
            // equivalent to: My.Cat.speciesName
            alert(this.self.speciesName);   // dependent on 'this'
            clone: function() {
            var cloned = new this.self;                      // dependent on 'this'
            cloned.groupName = this.statics().speciesName;   // equivalent to: My.Cat.speciesName
            return cloned;
            Ext.define('My.SnowLeopard', {
            extend: 'My.Cat',
            statics: {
            speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
            constructor: function() {
            var cat = new My.Cat();                 // alerts 'Cat', then alerts 'Cat'
            var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
            var clone = snowLeopard.clone();
            alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
            alert(clone.groupName);                 // alerts 'Cat'
            alert(My.Cat.totalCreated);             // alerts 3
tips(object) Alias of register. Configures a new quick tip instance and assigns it to a target element. See Ext.tip.QuickTip.register for details.
unregister(object) Removes any registered quick tip from the target element and destroys it.
© Copyright 2005-2011 SharpKit. All rights reserved.