1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default Answered: Adding Tooltip to combobox with template

    Answered: Adding Tooltip to combobox with template


    Hi All,

    I am using following code to generate a combobox.

    Code:
    Ext.onReady(function(){
        Ext.create('Ext.form.field.ComboBox', {
            renderTo: Ext.getBody(),
            width: 200,
            queryMode: 'local',
            valueField: 'id',
            displayField: 'name',
            store: {
                fields: ['id', 'name', 'link'],
                data: [
                    { id: 1, name: 'A', link: 'http://www.google.com'},
                    { id: 2, name: 'B', link: 'http://www.yahoo.com'},
                    { id: 3, name: 'C', link: 'http://www.microsoft.com'}
                ]
            },
            listConfig: {
                tpl: [
                    '<table width="100%"><tpl for=".">',
                        '<tr>',
                            '<td role="option" class="x-boundlist-item" width="70%">{name}</td>',
                            '<td align="right"><a href="{link}" width="30%" target="_blank">manage</a></td>',
                        '</tr>',
                    '</tpl></table>'
                ]
            }
        });
    });
    I want to add tooltip to both the columns('TD' tags).

    I looked at the following example. But I am able to add tooltip.

    http://dev.sencha.com/deploy/ext-4.0...customTplCombo

  2. Try this:
    Code:
    Ext.onReady(function(){
        Ext.tip.QuickTipManager.init();
    
    
        Ext.create('Ext.form.field.ComboBox', {
            renderTo: Ext.getBody(),
            width: 200,
            queryMode: 'local',
            valueField: 'id',
            displayField: 'name',
            store: {
                fields: ['id', 'name', 'link', 'tip', 'qtitle'],
                data: [
                    { id: 1, name: 'A', link: 'http://www.google.com', tip: 'Quicktip 1', qtitle: 'Tip1'},
                    { id: 2, name: 'B', link: 'http://www.yahoo.com', tip: 'Quicktip 2', qtitle: 'Tip2'},
                    { id: 3, name: 'C', link: 'http://www.microsoft.com', tip: 'Quicktip 3', qtitle: 'Tip3'}
                ]
            },
            listConfig: {
                tpl: [
                    '<table width="100%"><tpl for=".">',
                        '<tr data-qtip="{tip}" data-qtitle="{qtitle}">',
                            '<td role="option" class="x-boundlist-item" width="70%">{name}</td>',
                            '<td align="right"><a href="{link}" width="30%" target="_blank">manage</a></td>',
                        '</tr>',
                    '</tpl></table>'
                ]
            }
        });
    });

  3. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      1  

    Default


    Try this:
    Code:
    Ext.onReady(function(){
        Ext.tip.QuickTipManager.init();
    
    
        Ext.create('Ext.form.field.ComboBox', {
            renderTo: Ext.getBody(),
            width: 200,
            queryMode: 'local',
            valueField: 'id',
            displayField: 'name',
            store: {
                fields: ['id', 'name', 'link', 'tip'],
                data: [
                    { id: 1, name: 'A', link: 'http://www.google.com', tip: 'Quicktip 1'},
                    { id: 2, name: 'B', link: 'http://www.yahoo.com', tip: 'Quicktip 2'},
                    { id: 3, name: 'C', link: 'http://www.microsoft.com', tip: 'Quicktip 3'}
                ]
            },
            listConfig: {
                tpl: [
                    '<table width="100%"><tpl for=".">',
                        '<tr data-qtip="{tip}">',
                            '<td role="option" class="x-boundlist-item" width="70%">{name}</td>',
                            '<td align="right"><a href="{link}" width="30%" target="_blank">manage</a></td>',
                        '</tr>',
                    '</tpl></table>'
                ]
            }
        });
    });

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    219
    Answers
    10
    Vote Rating
    5
    webfriend13 is on a distinguished road

      0  

    Default


    Hi Vietits,

    Thank you for quick reply. I am able to add tooltip.
    Is there any way to add a header to tooltip? So the tooltip should have two sections.
    1) Header: Which contains some text
    2) Body: Which shows the actual tooltip.

  5. #4
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    346
    Vote Rating
    113
    vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all vietits is a name known to all

      0  

    Default


    Try this:
    Code:
    Ext.onReady(function(){
        Ext.tip.QuickTipManager.init();
    
    
        Ext.create('Ext.form.field.ComboBox', {
            renderTo: Ext.getBody(),
            width: 200,
            queryMode: 'local',
            valueField: 'id',
            displayField: 'name',
            store: {
                fields: ['id', 'name', 'link', 'tip', 'qtitle'],
                data: [
                    { id: 1, name: 'A', link: 'http://www.google.com', tip: 'Quicktip 1', qtitle: 'Tip1'},
                    { id: 2, name: 'B', link: 'http://www.yahoo.com', tip: 'Quicktip 2', qtitle: 'Tip2'},
                    { id: 3, name: 'C', link: 'http://www.microsoft.com', tip: 'Quicktip 3', qtitle: 'Tip3'}
                ]
            },
            listConfig: {
                tpl: [
                    '<table width="100%"><tpl for=".">',
                        '<tr data-qtip="{tip}" data-qtitle="{qtitle}">',
                            '<td role="option" class="x-boundlist-item" width="70%">{name}</td>',
                            '<td align="right"><a href="{link}" width="30%" target="_blank">manage</a></td>',
                        '</tr>',
                    '</tpl></table>'
                ]
            }
        });
    });

Thread Participants: 1

Tags for this Thread