Results 1 to 10 of 10

Thread: Is it possible to add tooltip to menu item?

  1. #1
    Sencha User
    Join Date
    Mar 2008
    Location
    Silver Spring, MD
    Posts
    79

    Default Is it possible to add tooltip to menu item?

    Is there simple way to add tooltip (qtip) to menu item?

    Your replies will be highly appreciated.

    Andrei

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Might be best to create an Ext.Tooltip targetted on the Menu's Element, and use the delegate option to show up when moved over individual items.

    Menu items get the CSS class "x-menu-item".

    Then use a beforeshow listener to poke in any content you like depending on what its over.

  3. #3
    Sencha User
    Join Date
    Mar 2008
    Location
    Silver Spring, MD
    Posts
    79

    Default This is what I came up with

    is is possible to do it better:

    Code:
    {
    	id: 'delete-context',
    	text: "Delete",
    	iconCls: "mc-menu-delete-context",
    	qtitle: "Delete Context",
    	qtip: "Delete this context and all subordinate contexts",
    	listeners: { afterrender: function( thisMenuItem ) { 
    		Ext.QuickTips.register({
    			target: thisMenuItem.getEl().getAttribute("id"),
    			title: thisMenuItem.initialConfig.qtitle,
    			text: thisMenuItem.initialConfig.qtip
    		});
    	}}
    }

  4. #4
    Sencha User
    Join Date
    Mar 2008
    Location
    Silver Spring, MD
    Posts
    79

    Default "delegate" looks very promising

    I think this is exactly what I am looking for

    Thnx

  5. #5
    Sencha User
    Join Date
    Mar 2008
    Location
    Silver Spring, MD
    Posts
    79

    Default SOLVED:

    This is what I come up with:
    Code:
    ...
    afterrender: function( thisMenu ) { 
    	thisMenu.tip = new Ext.ToolTip({
    		target: thisMenu.getEl().getAttribute("id"),
    		delegate: ".x-menu-item",
    		trackMouse: true,
    		renderTo: document.body,
    		text: "text",
    		title: "title",
    		listeners: {
    			beforeshow: function updateTip( tip ) {
    				var menuItem = thisMenu.findById( tip.triggerElement.id );
    				if( !menuItem.initialConfig.qtip ) return false;
    							
    				tip.header.dom.firstChild.innerHTML = menuItem.initialConfig.qtitle;
    				tip.body.dom.innerHTML = menuItem.initialConfig.qtip;
    			}
    		}
    	});
    }
    ...
    Works great.

    Should it be part of standard menu functionality? I can not imagine that I am the only one who needs to provide tooltips for some of menu items.

    Animal,
    Thanx again!!

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Yes, perhaps there should be a tooltip: {tipCfg} config on Menu which would do exactly as you did: create a ToolTip on the Menu's Element configured the way you want if configured. It's a small addition.

  7. #7

    Default

    I'm using this ux for menu item tooltips:

    Code:
    /**
     * Creates a menu that supports tooltip specs for it's items. Just add "tooltip: {text: 'txt', title: 'ssss'}" to
     * the menu item config, "title" value is optional.
     * @class Ext.ux.TooltipMenu
     * @extends Ext.menu.Menu
     */
    Ext.ux.TooltipMenu = Ext.extend(Ext.menu.Menu, {
    	afterRender: function() {
    		Ext.ux.TooltipMenu.superclass.afterRender.apply(this, arguments);
    		
    		var menu = this;
    		this.tip = new Ext.ToolTip({
    			target: this.getEl().getAttribute('id'),
    			renderTo: document.body,
    			delegate: '.x-menu-item',
    			title: 'dummy title',
    			listeners: {
    				beforeshow: function updateTip(tip) {
    					var mi = menu.findById(tip.triggerElement.id);
    					if(!mi || !mi.initialConfig.tooltip || !mi.initialConfig.tooltip.text) {
    						return false;
    					}
    					var title = typeof(mi.initialConfig.tooltip.title) == 'undefined' ? '' : mi.initialConfig.tooltip.title;
    					tip.header.dom.firstChild.innerHTML = title;
    					tip.body.dom.innerHTML = mi.initialConfig.tooltip.text;
    				}
    			}
    		});
    	}
    });

  8. #8
    Sencha User
    Join Date
    Mar 2011
    Location
    Fort Lauderdale, FL
    Posts
    13

    Default

    I was trying to do the same thing and I want to share my approach.

    PHP Code:
    Ext.ux.MenuQuickTips Ext.extend(Object, {
        
    init: function (menu) {
            
    menu.items.each(function (item) {
                if (
    typeof (item.qtip) != 'undefined')
                    
    item.on('afterrender', function (menuItem) {
                        var 
    qtip typeof (menuItem.qtip) == 'string'
                                    
    ? {textmenuItem.qtip
                                    : 
    menuItem.qtip;
                        
    qtip Ext.apply(qtip, {targetmenuItem.getEl().getAttribute('id')});
                        
    Ext.QuickTips.register(qtip);
                    });
            });
        }
    });
    Ext.preg('menuqtips'Ext.ux.MenuQuickTips); 
    Then you can use it as simple as a string or a object with full config on the menu:

    PHP Code:
    menu: {
        
    xtype'menu',
        
    items: [
            {
                
    text'menu item',
                
    qtip: {
                    
    title'My Tooltip',
                    
    text'Tooltip Text'
                
    }
            },
            {
                
    text'menu item 2',
                
    qtip'Tooltip text 2'
            
    }
        ],
        
    plugins: [
            {
                
    ptype'menuqtips'
            
    }
        ]


  9. #9
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    431

    Default

    Will this work for 4.1 as well?

  10. #10
    Sencha User
    Join Date
    Aug 2011
    Posts
    2

    Default

    Mi propuesta ( Extjs 4.0.7 )

    PHP Code:
    Ext.define('Ext.ux.protoMenu', {
        
    extend'Ext.menu.Menu',
        
    alias'widget.protoMenu',

        
    afterRender: function() {
            
    this.superclass.afterRender.apply(thisarguments);

            var 
    menu this;
            
    this.tip = new Ext.ToolTip({
                
    targetthis.getEl().getAttribute('id'),
                
    renderTodocument.body,
                
    trackMousetrue,
                
    delegate'.x-menu-item',
                
    title'',
                
    listeners: {
                    
    beforeshow: function(tip) {
                        var 
    menu.activeItem.initialConfig
                        if ( 
    c  && c.tooltip)
                            
    tip.update(c.tooltip);
                        else
                            return 
    false ;
                    }
                    
                }
            });
        }
    }); 

    Codigo de ejemplo

    PHP Code:

    Ext
    .create('Ext.ux.protoMenu', {
        
    width100,
        
    margin'0 0 10 0',
        
    floatingfalse,
        
    // usually you want this set to True (default)
        
    renderToExt.getBody(),
        
    // usually rendered by it's containing component
        
    items: [{
            
    text'regular item 1'
            
    tooltip 'xxxxx zzzzzz'
        
    },
        {
            
    text'regular item 2',
            
    tooltip : { html 'yy htm'}
            
        }]
    });


    On Line

    http://jsfiddle.net/dariogomezt64/jVMXt/

Posting Permissions

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