PDA

View Full Version : Is it possible to add tooltip to menu item?



atchijov
11 Aug 2009, 10:44 AM
Is there simple way to add tooltip (qtip) to menu item?

Your replies will be highly appreciated.

Andrei

Animal
11 Aug 2009, 10:51 AM
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.

atchijov
11 Aug 2009, 10:52 AM
is is possible to do it better:


{
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
});
}}
}

atchijov
11 Aug 2009, 10:55 AM
I think this is exactly what I am looking for

Thnx

atchijov
11 Aug 2009, 11:21 AM
This is what I come up with:

...
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!!

Animal
11 Aug 2009, 11:53 AM
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.

sergei.stolyarov
16 Feb 2010, 3:14 AM
I'm using this ux for menu item tooltips:


/**
* 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;
}
}
});
}
});

FrankXP
18 Apr 2011, 8:00 AM
I was trying to do the same thing and I want to share my approach.


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'
? {text: menuItem.qtip}
: menuItem.qtip;
qtip = Ext.apply(qtip, {target: menuItem.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:


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'
}
]
}

ttbgwt
18 Apr 2012, 5:37 AM
Will this work for 4.1 as well?

Dariogt
11 Jul 2012, 8:11 PM
Mi propuesta ( Extjs 4.0.7 )



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

afterRender: function() {
this.superclass.afterRender.apply(this, arguments);

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

}
});
}
});




Codigo de ejemplo




Ext.create('Ext.ux.protoMenu', {
width: 100,
margin: '0 0 10 0',
floating: false,
// usually you want this set to True (default)
renderTo: Ext.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/