How to position hidden speech bubbles - html

Question

I am building my first website and I am having some hidden speech bubbles appear when you hover over image like this demo
However I don't know how to affect the positioning measurements of the speech bubble, how could I make it so the speech bubble is aligned in the center of the box bellow it?
Any help would be much appreciated!
HTML:
<div id="container">Hover over me!<span>Hidden message here.</span></div>
CSS:
#container {
background-color: #FF0;
margin: 100px;
float: left;
height: 200px;
width: 200px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
a.hoverbubble {
position: relative;
text-decoration: none;
}
a.hoverbubble span {display: none;
}
a.hoverbubble:hover span {
display: block;
position: absolute;
padding: .5em;
content: attr(title);
min-width: px;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -40px;
background: rgba(0,0,0,.8);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #fff;
font-size: 0.86em;
font-family: Arial, Helvetica, sans-serif;
}
a.hoverbubble:hover span:after {
position: absolute;
display: block;
content: "";
border-color: rgba(0,0,0,.8) transparent transparent transparent;
border-style: solid;
border-width: 10px;
height: 0;
width: 0;
position: absolute;
bottom: -20px;
left: 1em;
}

Answer 1

Set your container div to position:relative
remove position:relative from your a tag
Changing position:relative from your a tag to your div container will allow your absolutely positioned span to align relative to the container rather than the a tag.
set your span to position:absolute
align your span by editing the values top:40%; left: 11%;
you can now position your span element relative to your container.
http://jsfiddle.net/e4q7K/18/

Answer 2

On the assumption that the hidden message is to be centered on the link..
JSFiddle Demo
HTML
<div id="container">
<a href="#" class="hoverbubble">Hover over me!
<span>Hidden message here.</span>
</a>
</div>
CSS
#container {
background-color: #FF0;
margin: 100px;
float: left;
height: 200px;
width: 200px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
a.hoverbubble {
position: relative;
text-decoration: none;
background-color: lightblue;
}
a.hoverbubble span {display: none;}
a.hoverbubble:hover span {
display: block;
position: absolute;
padding: .5em;
text-align: center;
width: auto;
height: auto;
white-space: nowrap;
top: -40px;
left:50%; /* push the block halfway over to the right */
-webkit-transform:translate(-50%, 0); /* move it back left half it's own width */
background: rgba(0,0,0,.8);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #fff;
font-size: 0.86em;
font-family: Arial, Helvetica, sans-serif;
}
a.hoverbubble:hover span:after {
position: absolute;
display: block;
content: "";
border-color: rgba(0,0,0,.8) transparent transparent transparent;
border-style: solid;
border-width: 10px;
height: 0;
width: 0;
position: absolute;
bottom: -20px;
left: 1em;
}