Ext.js - Tips on Labels

Sean Bluett says.....

Having just started working with Ext.js I ran int o problems adding tool tips to labels in a form.

Here is a custom wrapper I added to allow this. Even supports icons !

 
FormUtility  =  {
    
    
    setElementTip : function(config){

        var objConfig  =  {};  
    
    
        var sElement = '  fofofooffo';
    
    
        return sElement;
    
    },
    
    /***
     *
     *    eg fieldLabel: '
     *      
     *      config  : {
     *      tip  :{title: 'a title'  , text: '  the tip goes here '} ,
     *        img :{   } ,
     *        label : '  text for label '
     *         
     *           }
     *        
     *        
     *        */
    
    configLabelTip:{
        label: 'label text missing',
        qwidth: '200',
        qtip: 'Add a tip text to this item',   
        qtitle : 'title',
        img:{
            'class' : 'field-with-icon-label-img'
        }
    },
    
    getLabelTipWithMarkup:function(config){
        try {
            if(config)
            {
                for (var name in config) {
                    this.configLabelTip[name] = config[name];
                }
            }
            if(config.img)

            {
                for (var name in config) {
                    this.configLabelTip.img[name] = config.img[name];
                }
            }
            var sElement =   '';
            if(config.img)
            {
                sElement +=  '' ;
            }
            sElement +=   this.configLabelTip.label + '';
        } catch (e){
            
            return e;
        }
        return sElement;
    }
         
 
    
    
};

Then to call it we would .....

FormUtility.getLabelTipWithMarkup({
                        label : Language.getString('LABEL_TEXT'),
                        qtip : Language.getString('LABEL_TIP_TEXT'),
                        qtitle : Language.getString('LABEL_TIP_TITLE'),
                        img : {
                            src : 'images/label_icons/label_img.png'
                        }
                    })
... you can replace Language.getString with hard coded string if you want.


This was driving me mad so I thought I'd share!! 


The normal way you'd apply this is .....
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
});



Like it  ? ..... - http://docs.sencha.com/ext-js/