Nice layout!
I think for whatever reason your hide event is not being fired. Instead of tackling around with the initial problem, my approach would be not to add a mouseout function to the .hover() but rather to hide all shown flyouts other then the one currently hovered on hover(). Let me explain by example:
In your code you have:
$('.left-slide a').hover(
function () {
$(this).siblings('.info-bubble').show('slide', {direction: 'right'}, 100);
},
function () {
$(this).siblings('.info-bubble').hide('slide', {direction: 'right'}, 100);
}
);
Let's try this instead:
$('.left-slide a').hover(
function () {
$('.left-slide .info-bubble:visible:not(#'+$(this).attr('id')+')').hide('slide', {direction: 'left'}, 100);
$(this).siblings('.info-bubble').show('slide', {direction: 'right'}, 100);
}
);
THey all most certainly have id's because of the different icons (wild guess here though). This approach might not perform as well, but might match your needs.