Add pointer arrow classes for all sides of the div centered

Question

I want to add arrows to my div similar to that you would see on a tooltip, I need separate classes that I can add to the main div that will then put an arrow centered on the div, either left, right, top or bottom.

I need the arrows to to be centered regardless of the width / height of the div.

Here is what I have so far: http://jsfiddle.net/hRMgk/1/

Full CSS, HTML and jQuery on the fiddle

<div id="theHover" class="therequest">
 <div class="noprint">
    <button  id="closetheHover">Close Window</button>
 </div>
        You need to start here on the website.
</div>

Answer 1

I think you are talking about triangles in the chat bubbles which are very much frequent in many applications... Here is the fiddle link which i think you are interested in.. I just added this to your css :

 #theHover.arrow::before
 {
content:'';
position:absolute;
left:50%;
top:100%;
border:12px solid black;
border-color:Blue transparent transparent transparent;
}
#theHover.arrow::after{
content:'';
position:absolute;
left:51%;
top:100%;
border:10px solid black;
 border-color:white transparent transparent transparent; 
}

This is done basically by using the before content and after content property in CSS... You can get more info from this site ...

Answer 2

Mr.Kelly,

add code in the css (#hover)

    text-align:center;
    margin-top:auto;
    margin-bottom:auto;

Check this link http://jsfiddle.net/hRMgk/18/

Good luck !