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!

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

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.

http://jsfiddle.net/e4q7K/18/


    CSS Howto..

    How to grey out a box in CSS

    How to get logo to front layer

    How to Change CSS of Custom Template JointJS Element?

    How to remove excess space added with \n

    Article container expands to show all content in standard mode, works fine in quirks mode. Only part wrong

    How do I integrate a jQuery script in to my html file?

    How to use css to keep horizontal visible when vertical is auto?

    How to give all divs same amount of space on each side

    how to style simple_form with material design or custom css

    How to modify only via CSS a color already defined in HTML?

    How to arrange subchild in the horizontal menu

    How to keep “text-decoration: underline” from breaking while applying some positioning to the child ?

    How to remove background from breadCrumb

    How to combine bold and italic in CSS?

    How to keep two input box side by side in html using CSS?

    How to edit css selectors to test something in Firebug?

    How to change menu icon when scrolling to specific sections of the website?

    How to make liquid layout in css using em?

    How can I set a google-font as default-font in CKEditor?

    How to externally style with CSS the specific 3 td tags on the html table generated by the pager row of a asp.net gridview control

    How to apply “-webkit” css rules using jquery .css

    How to increase cell height of GWT celltable : Issue with IE?

    How to use CSS to create an image overlay effect?

    How to use different CSS opacity in a nested div? [duplicate]

    How to create generic CSS class with input parameter

    How to create css code that works for all browser?

    How can I remove a text appearing in quotes after tag using CSS? [duplicate]

    How to add to css class in a single html tag? [duplicate]

    How to set responsively images on images to appear fixed using HTML+CSS+JS?

    CSS media queries [how to transform to hyperlinks via media queries]