CSS Tooltips Problem

[joe in nantucket]

Good evening,
I am trying to use CSS tooltips to display locations in my state but unfortunately it's not working properly. When I move over a marker, the tooltip doesn't display under it like it should, it shows up in the upper left corner. Also, depending on what order they are in on the page (in the code), when I move over a link, all the other links before it are pushed down.

I appreciate any help anyone can give.

Here's the code:

/* CSS Document */

#map {
background:url(../images/mapfull.gif);
width:510px;
height:500px;
}

#star {
width:28px;
height:26px;
position:absolute;
}

span.tool {
position: relative;
}

span.tool span.tip {
display: none;
}

span.tool:hover span.tip {
display: block;
z-index: 100;
position: relative;
top: 2.5em;
left: 0;
width: 100px;
line-height: 1.2em;
padding: 3px 7px 4px 6px;
border: 1px solid #336;
background-color: #f7f7ee;
font-family: arial, helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000;
text-align: left;
}

#content span.tool::after {
padding-left: 2px;
content: url(/img/bubble.gif);
}

/* HTML Document */

<div id="map">

<a href="#"><span class="tool"><img src="images/star.png" id="star" style="left:324px;top:119px;" border="0" /><span class="tip">Location 1</span></span></a>

<a href="#"><span class="tool"><img src="images/star.png" id="star" style="left:312px;top:261px;" border="0" /><span class="tip">Location 2</span></span></a>

</div>

[4css]

Hi Joe,

I have never worked with tooltips, however, if you google Eric Meyers tooltips you will find some pretty good information.

Hope this helps you out a bit!

~4css