[jQuery] Tooltip made from two different elements. Hover() Issue

[NeoSwf]

Hey. First time here. a New and Excited user to JQ.

I got 2 elements:
.toolTipCaller is a <B> element.
.toolTip  is a div with all the tooltip DOM inside of him.
they are seperated elements. they r not nested one inside of the
other.

I dont have problems fadeIn the Div.toolTip element while hovering the
B.toolTipCaller.
My problem is how to close the Tooltip only if
   * I'm hovering out of the B.toolTipCaller, but not entering the
DIV.toolTip scope.
   * I'm hovering out of the DIV.toolTip scope.

This is the current code. as u can see, i fadeOut only when i'm
hovering out the B.toolTipCaller.

$(document).ready(function(){
     $("B.toolTipCaller").hover(function(event){
        $("Div.toolTip").fadeIn("slow");
     }, function(){
        $("Div.toolTip").fadeOut("slow");
     });
});

I tried to give padding to the DIV.toolTip on his left, to cover the B
element by the Div itself. didnt worked that good. look like a dirty
solution.

I'll appreciate any suggestions, ideas & directions.