You are using an IE version that is older than IE7. The tooltips will look better in IE7. It might be a good time to patch.

Ninja Tips

This guide is for those who need help with tooltips, and would like to use them in different ways other than the normal boring ways.

As you can see above I have used tooltips for quotes bubbles. I made a list and then positioned each list item absolutely over a ninja. Then I used CSS to hide the spans inside the anchor elements, and to bring them back when the user hover's over the ninja's

Below is the markup I used for the above example and it's tooltips.

<div class="main_wrap">
 <ul class="ninja_list">
 <li class="left_ninja"><a href="#">title you want people to see if CSS is disabled or for screenreaders</a></li>
 <li class="mid_ninja"><a href="#">title you want people to see if CSS is disabled or for screenreaders</a></li>
 <li class="right_ninja"><a href="#">title you want people to see if CSS is disabled or for screenreaders</a></li>
 </ul>
</div>

This will provide a list for those who have CSS off or those who are using text readers. The next bit is the CSS to make the tooltips happen, along with placing the list items.

.main_wrap
{
    position: relative;
    height: 400px;
    background: url(images/ninjas_three.jpg) no-repeat;
}
.main_wrap ul
{
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: block;
}
.left_ninja
{
    position: absolute;
    left: 50px;
    top: 80px;
}
.mid_ninja
{
    position: absolute;
    left: 235px;
    top: 100px;
}
.right_ninja
{
    position: absolute;
    left: 405px;
    top: 90px;
}
/* NINJA in a box */
/* difines the width and height of anchors along with block */

.left_ninja a
{
    display: block;
    width: 100px;
    height: 160px;
    position: relative;
}
.mid_ninja a
{
    display: block;
    width: 80px;
    height: 140px;
    position: relative;
}
.right_ninja a
{
    display: block;
    width: 80px;
    height: 160px;
    position: relative;
}
/* NINJA pop smoke, span disappear */
/* hides the span where the tooltip is */
/* this also hides text */
.left_ninja span,
.mid_ninja span,
.right_ninja a span,
span.smoke em
{
    display: none;
}
/* span appear like NINJA out of nowhere */

.left_ninja a:hover span
{
    display: block;
    width: 200px;
    height: 91px;
    position: absolute;
    background: url(images/left_ninja_tooltip.png) no-repeat;
    top: -45px;
    left: 40px;
}
.mid_ninja a:hover span
{
    display: block;
    width: 200px;
    height: 91px;
    position: absolute;
    background: url(images/mid_ninja_tooltip.png) no-repeat;
    top: -70px;
    left: -80px;
}
.right_ninja a:hover span
{
    display: block;
    width: 200px;
    height: 91px;
    position: absolute;
    background: url(images/right_ninja_tooltip.png) no-repeat;
    top: -40px;
    left: -160px;
}

Basically you are telling the span inside the anchor element to display none. Then when the anchor is hovered over you are bringing back that span with display block. For more hands on and visual examples try out the Tooltips by Ninja's Page.

I hope this helps, and I hope you can use this as a guide with tooltips and even CSS drop down menu's.