PDA

View Full Version : listen to all mouse over and mouseouts



markkl
22 Jan 2009, 6:22 AM
I want to make a little help menu thats shows extra info about the element that the mouse is on
atm i have:


listeners:{
mouseover:{scope:this, fn:function(){
helpMenuShow('klik hier om een nieuwe contact aan te maken);

},buffer:50},
mouseout:{scope:this, fn:function(){
helpMenuHide();

},buffer:50}
}


Now i would like to do this with 100+ elements and if i add a mouseover and mouse out to every element i would get LOTS of code.


Is there a simple way to do this?
like:
{


xtype:'button',
helpmenutip:'klik hier om een nieuwe contact aan te maken'
}

firefoxSafari
22 Jan 2009, 7:13 AM
Buttons have a config option called ' tooltip ' - I think this is what you want. Remember to initialize the tooltip handler first or they won't show up.



Ext.QuickTips.init();


If necessary, you can also add tooltips directly to markup with the ext:qtip attribute.

Animal
22 Jan 2009, 7:28 AM
Or you could use a single Tooltip, and use the delegate option to have it react to certain DomQuery selectors: http://extjs.com/forum/showthread.php?p=265259#post265259

markkl
22 Jan 2009, 10:10 AM
i looked at:
http://extjs.com/forum/showthread.ph...259#post265259

but i want to catch ALL tooltips in my application and put the tip in a panel where i want it like in my example.

Animal
22 Jan 2009, 10:39 AM
That's QuickTips. It's a single tooltip. Just add an ext:qtip property to an element, and the QuickTips singleton will display it when you hover over it.

markkl
22 Jan 2009, 10:53 AM
That's QuickTips. It's a single tooltip. Just add an ext:qtip property to an element, and the QuickTips singleton will display it when you hover over it.

Yes but i want the tip in the left bottom of my menu ( see pic) how do i do that?

Animal
22 Jan 2009, 11:22 AM
In a beforeshow handler

markkl
22 Jan 2009, 3:30 PM
In a beforeshow handler


DOH that was easy THNX! :D

but now i got one more little prob:
How do i know when there is a mouseout after a return false on beforeshow?


Ext.QuickTips.getQuickTip().on('beforeshow', function(a) {
helpMenuShow(a.activeTarget.helpMenu);
return false;
});
Ext.QuickTips.getQuickTip().on('hide', function(a) {
helpMenuHide();
});

Animal
23 Jan 2009, 2:36 AM
So you don't wnayt any tooltip at all.

Probably best just using a mousout listener on the document and check on what you've moused out of and act accordingly.