Results 1 to 6 of 6

Thread: Adding Tool tip in label

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    8

    Default Adding Tool tip in label

    How to add the tooltip in 'xtype:label' during mouse hover

  2. #2
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106

    Default

    I don't see any clearly documented way to do this inline, in the config of the label itself.

    The code below is very verbose/painful to me, but it works...

    Code:
    Ext.onReady(function() {
            
      Ext.tip.QuickTipManager.init();
            
      var aWindow = Ext.create('Ext.window.Window', {
        height: 200,
        width: 400,
        items: [{
          xtype: 'label',
          itemId: 'myLabel',
          text: 'Some Label'
        }]
      }).show();
            
      var tip = Ext.create('Ext.tip.ToolTip', {
        target: aWindow.down('#myLabel').el,
        html: 'This label has a tooltip...'
      });
    
    });
    I know that in ExtJs 3.x, you could wrap your label text in a <span> and use an ext:qtip config, but that doesn't seem to work with ExtJs 4.x.

    Anyone else know if there is an alternate ext:qtip syntax that works on ExtJs 4.x?
    Last edited by friend; 10 Sep 2012 at 10:51 AM. Reason: grammar

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    1. Use Ext.tip.QuickTipManager: Applied for all elements in application.
    Code:
    Ext.onReady(function(){
        Ext.tip.QuickTipManager.init();
        
        Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            width: 200,
            height: 200,
            title: 'Form demo',
            items: [{
                xtype: 'label',
                text: 'Label',
                autoEl: {
                    tag: 'label',
                    'data-qtip': 'Label tip'
                }
            }]
        });
    });
    2. Use Ext.tool.QuickTip: Applied for elements inside a container.
    Code:
    Ext.onReady(function(){
        Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            width: 200,
            height: 200,
            title: 'Form demo',
            layout: 'vbox',
            items: [{
                xtype: 'label',
                text: 'Label 1',
                autoEl: {
                    tag: 'label',
                    'data-qtip': 'Label 1 tip'
                }
            },{
                xtype: 'label',
                text: 'Label 2',
                autoEl: {
                    tag: 'label',
                    'data-qtip': 'Label 2 tip'
                }
            }],
            listeners: {
                render: function(form){
                    Ext.create('Ext.tip.QuickTip', {
                        target: form.getEl()
                    });
                }
            }
        });
    });
    3. Use Ext.tool.ToolTip: Applied for a specific element
    Code:
    Ext.onReady(function(){
        Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            width: 200,
            height: 200,
            title: 'Form demo',
            items: [{
                xtype: 'label',
                text: 'Label',
                listeners: {
                    render: function(label){
                        Ext.create('Ext.tip.ToolTip',{
                            target: label.getEl(),
                            html: 'Label tip'
                        });
                    }
                }
            }]
        });
    });

  4. #4
    Sencha User
    Join Date
    Jun 2010
    Posts
    2

    Default

    @friend :
    1. Don't use ptoperty label for displaying text ...
    2. In property html, use <ext title="The tooltip to display">The label to display</ext>

  5. #5
    Ext Premium Member
    Join Date
    May 2010
    Posts
    19

    Smile

    Thanks p2k77, solved the issue for me!

    Note to self:
    When using label.setText be sure to set encode to false:
    Code:
    label.setText('<ext title="The tooltip to display">The label to display</ext>', false)

  6. #6

    Join Date
    Aug 2007
    Location
    Romania
    Posts
    41

    Default

    this also works on fieldset title. Thank you!

Posting Permissions

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