How to position hidden speech bubbles

Tags: html,css,hover,position

Problem :

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!


<div id="container"><a href="#" class="hoverbubble">Hover over me!<span>Hidden message here.</span></a></div>


#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;

Solution :

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.

    CSS Howto..

    How to link a header in a standards-compliant way?

    JavaFx how to align only one column-header in tableview?

    How to Properly Add CSS in a MailMessage

    How to change a defined value to a unspecified value by css?

    How to detect if html contains block level elements using jQuery?

    How to position the sharing buttons on upper-left corner of the game and not the view?

    How to vertically align a form and image

    how to set two div's height equal with css

    How to overide all css style classes in an input field without effecting other elements?

    How to use jquery function on numbers separated by .(dot) or ,(comma) as thousands separator

    How to expand link on hoover? Add “<” “>” symbols around link?

    How to style
  • s inside
      as a table with custom height?
  • How to Detect css by iPhone/iPad

    how to apply css in angular.js

    How can I prevent my button from being mangled?

    How to override global style for img tag in css

    How to dynamically pass variables from HTML to CSS [closed]

    How to attach CSS to my template?

    CSS How to keep bodies of html file and included files from merging?

    How can I :hover over different links in one line while getting the spacing correct?

    How do I have the div displayed without having text content?

    CSS - How to stack divs by columns of 2

    How do I display all the data in a MySQL table in a theme? [closed]

    How to change value stylesheet_url in wordpress?

    How to make html elements fire effects on other elements using css

    How to ignore css class

    How to I create two containers with different backgrounds? [duplicate]

    How to make responsive popup div?

    How to make the underlines the same size in all browsers with css?

    How to overlay shadow with bootstrap?