Results 1 to 8 of 8

Thread: Trigger tooltip

    You found a bug! We've classified it as EXTJS-13794 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    769

    Default Trigger tooltip

    Is possible add tooltip to trigger? Didnt find any mention in the docs.

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Yes, it is. Generally, you can add a tooltip (or quicktip) to any DOM element. In this case, you would use triggerEl property of trigger field.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  3. #3
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    769

    Default

    Cheers Saki, thanks for tip. However there is only el in ExtJS 5. Simple example with data tip could look like this:
    PHP Code:
    Ext.create('Ext.form.field.Text', {
        
    renderToExt.getBody(),
        
    fieldLabel'My Custom Field',
        
    triggers: {
            
    foo: {
                
    cls'my-foo-trigger'
               
    handler: function() {
                    
    console.log('foo trigger clicked');
                }
            }
        },
        
    listeners: {
            
    render: function () {
                var 
    triggerEl this.getTrigger('foo').el;
                
    triggerEl.dom.setAttribute('data-qtip''foo trigger tooltip');
            }
        }
    }); 
    or you could create custom text component with tooltip triggers.

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    I still can find triggerEl in 5.0. Try to:
    1. navigate to http://dev.sencha.com/ext/5.0.0/exam...k/#form-combos
    2. in console type:
    PHP Code:
    Ext.ComponentQuery.query('combo')[0].triggerEl.set({'data-qtip':'Hello World'}) 
    The first combo gets the tooltip.

    However, this seems cleaner to me:
    PHP Code:
    Ext.ComponentQuery.query('combo')[0].getTrigger('picker').getEl().set({'data-qtip':'Hello Mars'}) 
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  5. #5
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    769

    Default

    The best would be add tooltip support to core Now I need to create another override because those functionality missing. Aye the example with
    PHP Code:
    getTrigger('picker').getEl() 
    is cleaner because who knows how long they will keep triggerEl inside. Currently when you compare 5.0 and 4.2 docs in 5.0 it is undocumented property. Anyway your idea with triggerEl led me to the result I expected

  6. #6
    Sencha User Phil Guerrant's Avatar
    Join Date
    May 2011
    Location
    Colorado
    Posts
    352

    Default

    Opened a ticket for this so we can implement tooltip support on triggers in the framework.

  7. #7
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Super! Thanks Phil.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  8. #8
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    169

    Default

    In the meantime you could use this solution as global fix:

    Code:
    Ext.define('App.bugfix.form.trigger.Trigger', {
        
        override: 'Ext.form.trigger.Trigger',
        
           //compatibility: '5.1.1.151',
    
    
        afterFieldRender: function() {
            this.callParent(arguments);
    
    
            var me = this;
            if(me.tooltip) {
                me.el.dom.setAttribute('data-qtip', me.tooltip);
            }
        },
    
    
    
    
    }, function() {
        if(Ext.getVersion().version != '5.1.1.151')
            console.warn('[EXTJS PATCH] App.bugfix.form.trigger.Trigger. CHECK IF THIS FEATURE HAS BEEN RELEASED: http://www.sencha.com/forum/showthread.php?286653');
    });

    So you can use "tooltip" as param of your trigger:

    Code:
        search : {
                tooltip: 'Search',
                cls: 'x-form-search-trigger',
                handler: function() {
                }
            },

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •