[jQuery] problems to trigger mouseout

[jQuery] problems to trigger mouseout


Hi guys,
I need a little help. I'm trying to create a toolTip Menu like shown
in this picture:
http://img233.imageshack.us/my.php?image=06criarestrutura10f16ij4.jpg
the menu has the following behaviors:
- when the mouse is over the blue link, tooltip menu apears.
- when mouse goes out of tooltip's area, tooltip disapear.
- 1 sec after mouse goes out of the link, tooltip disapear if mouse
isnt at tooltip's area.
I'm having problems in creating the third behavior. let me show you
some code. Some working code were replaced by commets in order to
simplify the code reading.
$.fn.toolTip = function(isMouseOver){
//create var toolTipDiv (the tooltip itself) and append it to the
body
$('.toolTip').mouseout(function(e){
//getting the limist of tooltip box
top = $('.toolTip').offset().top;
left = $('.toolTip').offset().left;
right = left+$('.toolTip').outerWidth();
bottom = top+$('.toolTip').outerHeight();
//testing if mouse is really out of the tool tip cause a mouse
over another element is considered a mouseout
//if you select a link inside the tooltip without this test
tooltip will disapear
if(e.pageX < left || e.pageX >= right || e.pageY < top ||
e.pageY >= bottom){
$('.toolTip').remove();
}
});
//.opcoes is the link class
$('.opcoes').mouseout(function(e){
window.setTimeout(function(){
$('.toolTip').trigger('mouseout');//this triggers just
doesnt work.
}, 1000);
});
};
$('.opcoes').mouseover(function(e){
$(this).toolTip(true);
});
As u can see, i tried to trigger a tooltip mouseout on link's
mouseout. But this doesnt work. Any body knows why or has an
alternative solution to this problem?
Thanks and forgive my ugly english.