From the top of my head:
- use some tooltip plugin? Should suffice i think.
- use jquery ui dialog? If the tooltips do not offer enough.
From the top of my head:
Your problem happened because of this:
a.tooltip span {
margin-left:8px;
}
With this you were creating an 'empty' area between the link and the span, so when you moused over this 'empty' area, the hover was not in effect anymore, that's why the span disappeared.
If you remove it, it works.
I understand that you want to do it on your own, but I would like to suggest you this plugin http://craigsworks.com/projects/qtip/
I'm using it in one big project and I really appreciate it!
It sounds to me that you are more after a flyout navigation solution rather then a tooltip.
This can be done mostly with HTML and CSS, javascript is only need to mimc :hover behaviour on something other then a <a>
.
See here for an example http://www.positioniseverything.net/css-flyout.html