Mouse over hover balloon title closes dd menu

[polysubstrate]

When I mouse over my menu items I have hover balloons intended to add some additional info if the user chooses to pause over the menu link text. Example: My menu item Fauna under photography may not be known by all visitors to be about animals, so I have included Amazing Animals as helper balloon text to help clarify the title.

The Issue: When the hover balloon is open and the mouse cursor is moved towards it and actually touches the balloon the menu instantly closes. I'd like for site visitors to not have the menu close on them unexpectedly.

The Question: Are there any parameters to adjust the balloon to either ignore the mouse cursor and allow it to glide over without change (like a z-index type hierarchy), or perhaps relocate the balloon farther from the cursor so the balloon will close before ever being reached by the cursor?

If you want to easily recreate the issue, hover the mouse cursor over the upper edge of a link box and the balloon will open below and to the right, then move the cursor towards the balloon and when touched the menu will close.

Thank you for any help you can provide,

Kevin

[polysubstrate]

When I mouse over my menu items I have hover balloons intended to add some additional info if the user chooses to pause over the menu link text. Example: My menu item Fauna under photography may not be known by all visitors to be about animals, so I have included Amazing Animals as helper balloon text to help clarify the title.

The Issue: When the hover balloon is open and the mouse cursor is moved towards it and actually touches the balloon the menu instantly closes. I'd like for site visitors to not have the menu close on them unexpectedly.

The Question: Are there any parameters to adjust the balloon to either ignore the mouse cursor and allow it to glide over without change (like a z-index type hierarchy), or perhaps relocate the balloon farther from the cursor so the balloon will close before ever being reached by the cursor?

If you want to easily recreate the issue, hover the mouse cursor over the upper edge of a link box and the balloon will open below and to the right, then move the cursor towards the balloon and when touched the menu will close.

Thank you for any help you can provide,

Kevin

After some additional searches I'm finding a number of sites using a CSS tooltips span option instead of the title option in the browser. I've tried the coding in Web Dev and it seems to work well and doesn't close the menu unexpectedly. Also appears to be feature rich (can include links and images, as well as text) and flexible in the way the balloon can be customized. Any real cons going this route? Easier alternatives with existing config?

Here is the code I've been testing:

CSS:
/* =============== Start Tool Tip Code ==================== */

a.tooltip {
position:relative;
text-decoration: none;
}

a.tooltip span {
display: none;
}

a.tooltip:hover span {
display:block;
z-index: 100;
position:absolute;
top:-15px;
left:275px;
padding: 3px 5px;
width:150px;
height:50px;
border:1px solid #ffff00;
background-color:#222222;
color:#cccccc;
font: normal 0.9em/1.2em arial, helvetica, sans-serif;
text-align: left;
}

/* =============== End Tool Tip Code ==================== */

HTML:

<a href="Link Addy" class="tooltip">Fauna<span>Amazing Animals</span></a>