Greetings

I am using a tool tip for showing some components info present in a main panel. Now adding a tool tip for the main panel also, is what causing the problem with the overlapping of 'component' and 'main panel' tool tip.

var mainPanel = new Ext.Panel({
frame: false,
bodyStyle:'border: solid 2px #99bbe8;background: #FFFFFF',
id: mouseoverpanel,
bodyBorder: true,
width: 547,
layout: 'table',
layoutConfig: {
columns: cols
}
});

I have taken an array var componentToolTip = [];

whenever i am drawing component on the main panel, i am pushing the tool tip of each component into this array with a unique id.

componentToolTip .push(['id_'+ ]);

And after rendering of components is done i am looping entire array and showing the tool tip information of each component.

for (var i = 0; i < componentToolTip .length; i++) {
new Ext.ToolTip({
target: componentToolTip [i][0],
html: componentToolTip [i][1],
anchor:'top',
trackMouse:true });
}

PROBLEM:
----------

Now i have even added the tool tip for the main panel also which is causing the problem. whenever i move the mouse over the main panel it is displaying the tool tip properly, but when i place the mouse on the component then it is showing both the main panel and the component tool tip simultaneously(overlapping one above the other).


Please can any suggest me a solution as it should show only one tool tip at a time.

when mouse is placed on the main panel it should show the tool tip and when the mouse is placed on the component then the main panel tool tip should not displayed.

Any help appreciated. Thanks.