Menu not showing tooltips....

**michael.prichard** · 26 Apr 2007 11:32 AM

Here is my code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Toolbar with Menu</title>

<link rel="stylesheet" type="text/css" href="assets/ext-1.0/resources/css/ext-all.css" />
<!-- LIBS -->     
<script type="text/javascript" src="assets/ext-1.0/adapter/yui/yui-utilities.js"></script>     
<script type="text/javascript" src="assets/ext-1.0/adapter/yui/ext-yui-adapter.js"></script>     
<!-- ENDLIBS -->
<script type="text/javascript" src="assets/ext-1.0/ext-all.js"></script>

<script type="text/javascript" >
	

Ext.onReady(function(){
	
	var toolsMenu = new Ext.menu.Menu({
		id: 'myMenu',
		items: [
              {text: '<b>Bold</b>', handler: onItemClick, tooltip:'tip this!'},
              {text: 'Groups', handler: onItemClick},
              {text: '<i>Italic</i>', handler: onItemClick}
		]
	});
	
	var tb = new Ext.Toolbar('toolbar');
	tb.add(
		new Ext.Toolbar.Button({
			text:'Search',
			handler: onButtonClick
		}),
		{
		text:'Tools',
		menu: toolsMenu  // assign menu by instance
	    },
		new Ext.Toolbar.Button({
			text:'Help',
			handler: onButtonClick,
			tooltip: {text:'This is a QuickTip with autoHide set to false and a title'}
		}),
			new Ext.Toolbar.Button({
			text:'Logout',
			handler: onButtonClick,
			tooltip: 'Logout from Application',
			
			enableToggle: true
	})
		
	);
	
	// handlers
    // functions to display feedback
    function onButtonClick(btn){
        Ext.Msg.alert('Button Click','You clicked the ' + btn.text + ' button.', btn.text);
    }

    function onItemClick(item){
        Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
    }

});
</script>

</head>
<html>
<body>

<div id="container">
<div id="toolbar" >	
</div>
</div>

</body>
</html>

I can't get any of the tooltips to show. Any ideas?

**tryanDLS** · 26 Apr 2007 12:11 PM

Add this to the top of your function

Code:

Ext.QuickTips.init();

**efege** · 26 Apr 2007 1:13 PM

I'm using

Code:

Ext.QuickTips.init();

and tooltips are showing on toolbar buttons, but still they don't show on menu items. What syntax should I use?

**tryanDLS** · 26 Apr 2007 2:00 PM

There is no built-in support for tooltips on menu items, but you could so something like

Code:

Ext.menu.BaseItem.prototype.onRender = function(container){
  this.el = Ext.get(this.el);
  container.dom.appendChild(this.el.dom);
  if (this.tooltip) {
   this.el.dom.qtip = this.tooltip;
  }
};

Then add tooltip:'my Tip' to a menu item's config

**efege** · 26 Apr 2007 2:15 PM

Thanks tryanDLS! Now my menus have tooltips

And at the same time, I learnt an extra bit about using Ext.

**michael.prichard** · 27 Apr 2007 10:34 AM

Great! It worked! Thanks.

Question, can I build these menus like Yahoo UI? I.e. <div> tags and then do a .render()?

**KRavEN** · 22 May 2007 11:00 AM

How would you go about doing the same for form fields?

**tryanDLS** · 22 May 2007 11:55 AM

The flow for fields is a little different, but you could probably do the same thing by overriding Field.prototype.onRender. Or it might be better to override afterRender - it's less code to add to your override file. Another way to avoid overriding base code would be to add the logic to the focus event handler and make sure you only add the tip the 1st time thru.

**J.C. Bize** · 4 Jun 2007 3:12 PM

Originally Posted by tryanDLS

The flow for fields is a little different, but you could probably do the same thing by overriding Field.prototype.onRender. Or it might be better to override afterRender - it's less code to add to your override file. Another way to avoid overriding base code would be to add the logic to the focus event handler and make sure you only add the tip the 1st time thru.

Yeah this works great... just what I was looking for, thanks.

PHP Code:


//override onRender function for form fields so that they display QuickTips

Ext.form.Field.prototype.afterRender = function(){

    if (this.tooltip) {

        this.el.dom.qtip = this.tooltip;

    }

    Ext.form.Field.superclass.afterRender.call(this);

    this.initEvents();

};



...



var combo = new Ext.form.ComboBox({

    store: store,

    displayField:'state',

    typeAhead: true,

    mode: 'local',

    triggerAction: 'all',

    emptyText:'Select a state...',

    selectOnFocus:true,

    width:135,

    tooltip: '<b>State</b><br/>Name of the state to display'

});

Hopefully, someone else will find this helpful!

Regards,
JC

**mscdex** · 22 Aug 2007 11:46 AM

Sorry, I found out there was a problem elsewhere in my code and had nothing to do with the snippet, after fixing that that snippet works great! Thanks

Menu not showing tooltips....

Thread Tools

Search Thread

Display

Menu not showing tooltips....

Menu not showing tooltips....

QuickTips on Form Fields

QuickTips on Form Fields