Just yesterday I was answering a CSS question in an online CSS group I belong to.  The question was on how to make tooltips with CSS.  The person who asked had a website with pictures on it.  He wanted to be able to hover over the pictures and get another tooltip box to pop up with yet another picture in it.

I tried to explain how I would do it, but I think I missed some things.  So I will try to redeem myself now with an explanation and a demo page!

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

<div class="main_wrap">
        <ul class="ninja_list">
            <li class="left_ninja"><a href="#"><span class="smoke"><em>title you want people to see if CSS is disabled or for screenreaders</em></span></a></li>
              <li class="mid_ninja"><a href="#"><span class="smoke"><em>title you want people to see if CSS is disabled or for screenreaders</em></span></a></li>
              <li class="right_ninja"><a href="#"><span class="smoke"><em>title you want people to see if CSS is disabled or for screenreaders</em></span></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.

Happy CSS tinkering,

~Michael