Ext JS 4.0.7 Sencha Docs

Ext.tip.QuickTipManager

Hierarchy

Ext.Base
Ext.tip.QuickTipManager

Files

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.
Ext.tip.QuickTipManager.init();

// 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: {
        backgroundColor:'#000000'
    },
    renderTo: Ext.getBody()
});


// Manually register a quick tip for a specific element
Ext.tip.QuickTipManager.register({
    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>

Available since: 4.0.0

Defined By

Properties

Available since: 4.0.0

Get the reference to the current class from which this object was instantiated. ...

Get the reference to the current class from which this object was instantiated. Unlike statics, this.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics for a detailed comparison

Ext.define('My.Cat', {
    statics: {
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        alert(this.self.speciesName); / dependent on 'this'

        return this;
    },

    clone: function() {
        return new this.self();
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',
    statics: {
        speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'
    }
});

var cat = new My.Cat();                     // alerts 'Cat'
var snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard'

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'

Available since: 4.0.0

Methods

Defined By

Instance Methods

...

Available since: 4.0.6

Parameters

Returns

Call the original method that was previously overridden with override Ext.define('My.Cat', { constructor: functi...

Call the original method that was previously overridden with override

Ext.define('My.Cat', {
    constructor: function() {
        alert("I'm a cat!");

        return this;
    }
});

My.Cat.override({
    constructor: function() {
        alert("I'm going to be a cat!");

        var instance = this.callOverridden();

        alert("Meeeeoooowwww");

        return instance;
    }
});

var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                          // alerts "I'm a cat!"
                          // alerts "Meeeeoooowwww"

Available since: 4.0.0

Parameters

  • args : Array/Arguments

    The arguments, either an array or the arguments object

Returns

  • Object

    Returns the result after calling the overridden method

Call the parent's overridden method. ...

Call the parent's overridden method. For example:

Ext.define('My.own.A', {
    constructor: function(test) {
        alert(test);
    }
});

Ext.define('My.own.B', {
    extend: 'My.own.A',

    constructor: function(test) {
        alert(test);

        this.callParent([test + 1]);
    }
});

Ext.define('My.own.C', {
    extend: 'My.own.B',

    constructor: function() {
        alert("Going to call parent's overriden constructor...");

        this.callParent(arguments);
    }
});

var a = new My.own.A(1); // alerts '1'
var b = new My.own.B(1); // alerts '1', then alerts '2'
var c = new My.own.C(2); // alerts "Going to call parent's overriden constructor..."
                         // alerts '2', then alerts '3'

Available since: 4.0.0

Parameters

  • args : Array/Arguments

    The arguments, either an array or the arguments object from the current method, for example: this.callParent(arguments)

Returns

  • Object

    Returns the result from the superclass' method

Ext.tip.QuickTipManager
view source
( )
Destroy the QuickTips instance. ...

Destroy the QuickTips instance.

Available since: 4.0.0

Ext.tip.QuickTipManager
view source
( )
Disable quick tips globally. ...

Disable quick tips globally.

Available since: 4.0.0

Ext.tip.QuickTipManager
view source
( )
Enable quick tips globally. ...

Enable quick tips globally.

Available since: 4.0.0

Ext.tip.QuickTipManager
view source
( ) : Ext.tip.QuickTip
Gets the single QuickTip instance used to show tips from all registered elements. ...

Gets the single QuickTip instance used to show tips from all registered elements.

Available since: 4.0.0

Returns

Ext.tip.QuickTipManager
view source
( [autoRender], [config] )
Initialize the global QuickTips instance and prepare any quick tips. ...

Initialize the global QuickTips instance and prepare any quick tips.

Available since: 4.0.0

Parameters

  • autoRender : Boolean (optional)

    True to render the QuickTips container immediately to preload images. (Defaults to true)

  • config : Object (optional)

    config object for the created QuickTip. By default, the QuickTip class is instantiated, but this can be changed by supplying an xtype property or a className property in this object. All other properties on this object are configuration for the created component.

( config ) : Objectchainableprotected
Initialize configuration for this class. ...

Initialize configuration for this class. a typical example:

Ext.define('My.awesome.Class', {
    // The default config
    config: {
        name: 'Awesome',
        isAwesome: true
    },

    constructor: function(config) {
        this.initConfig(config);

        return this;
    }
});

var awesome = new My.awesome.Class({
    name: 'Super Awesome'
});

alert(awesome.getName()); // 'Super Awesome'

Available since: 4.0.0

Parameters

Returns

  • Object

    mixins The mixin prototypes as key - value pairs

Ext.tip.QuickTipManager
view source
( ) : Boolean
Returns true if quick tips are enabled, else false. ...

Returns true if quick tips are enabled, else false.

Available since: 4.0.0

Returns

( name, cls )private
Used internally by the mixins pre-processor ...

Used internally by the mixins pre-processor

Available since: 4.0.6

Parameters

( name, value )private
...

Available since: 4.0.6

Parameters

( name, fn )private
...

Available since: 4.0.0

Parameters

Ext.tip.QuickTipManager
view source
( config )
Configures a new quick tip instance and assigns it to a target element. ...

Configures a new quick tip instance and assigns it to a target element. See Ext.tip.QuickTip.register for details.

Available since: 4.0.0

Parameters

  • config : Object

    The config object

( config ) : Ext.Basechainableprivate
...

Available since: 4.0.0

Parameters

Returns

Get the reference to the class from which this object was instantiated. ...

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'

        statics.totalCreated++;

        return 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() {
        this.callParent();
    }
});

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

Available since: 4.0.0

Returns

Ext.tip.QuickTipManager
view source
( config )
Alias of register. ...

Alias of register.

Available since: 4.0.0

Parameters

  • config : Object

    The config object

Ext.tip.QuickTipManager
view source
( el )
Removes any registered quick tip from the target element and destroys it. ...

Removes any registered quick tip from the target element and destroys it.

Available since: 4.0.0

Parameters

  • el : String/HTMLElement/Ext.Element

    The element from which the quick tip is to be removed or ID of the element.

Defined By

Static Methods

( members ) : Ext.Basechainablestatic
Add / override static properties of this class. ...

Add / override static properties of this class.

Ext.define('My.cool.Class', {
    ...
});

My.cool.Class.addStatics({
    someProperty: 'someValue',      // My.cool.Class.someProperty = 'someValue'
    method1: function() { ... },    // My.cool.Class.method1 = function() { ... };
    method2: function() { ... }     // My.cool.Class.method2 = function() { ... };
});

Available since: 4.0.2

Parameters

Returns

( fromClass, members ) : Ext.Basechainablestatic
Borrow another class' members to the prototype of this class. ...

Borrow another class' members to the prototype of this class.

Ext.define('Bank', {
    money: '$$$',
    printMoney: function() {
        alert('$$$$$$$');
    }
});

Ext.define('Thief', {
    ...
});

Thief.borrow(Bank, ['money', 'printMoney']);

var steve = new Thief();

alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'

Available since: 4.0.2

Parameters

  • fromClass : Ext.Base

    The class to borrow members from

  • members : String/String[]

    The names of the members to borrow

Returns

Create a new instance of this Class. ...

Create a new instance of this Class.

Ext.define('My.cool.Class', {
    ...
});

My.cool.Class.create({
    someConfig: true
});

All parameters are passed to the constructor of the class.

Available since: 4.0.2

Returns

( alias, origin )static
Create aliases for existing prototype methods. ...

Create aliases for existing prototype methods. Example:

Ext.define('My.cool.Class', {
    method1: function() { ... },
    method2: function() { ... }
});

var test = new My.cool.Class();

My.cool.Class.createAlias({
    method3: 'method1',
    method4: 'method2'
});

test.method3(); // test.method1()

My.cool.Class.createAlias('method5', 'method3');

test.method5(); // test.method3() -> test.method1()

Available since: 4.0.2

Parameters

Get the current class' name in string format. ...

Get the current class' name in string format.

Ext.define('My.cool.Class', {
    constructor: function() {
        alert(this.self.getName()); // alerts 'My.cool.Class'
    }
});

My.cool.Class.getName(); // 'My.cool.Class'

Available since: 4.0.4

Returns

Add methods / properties to the prototype of this class. ...

Add methods / properties to the prototype of this class.

Ext.define('My.awesome.Cat', {
    constructor: function() {
        ...
    }
});

 My.awesome.Cat.implement({
     meow: function() {
        alert('Meowww...');
     }
 });

 var kitty = new My.awesome.Cat;
 kitty.meow();

Available since: 4.0.2

Parameters

( members ) : Ext.Basechainablestatic
Override prototype members of this class. ...

Override prototype members of this class. Overridden methods can be invoked via callOverridden

Ext.define('My.Cat', {
    constructor: function() {
        alert("I'm a cat!");

        return this;
    }
});

My.Cat.override({
    constructor: function() {
        alert("I'm going to be a cat!");

        var instance = this.callOverridden();

        alert("Meeeeoooowwww");

        return instance;
    }
});

var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                          // alerts "I'm a cat!"
                          // alerts "Meeeeoooowwww"

Available since: 4.0.2

Parameters

Returns