Jquery Slide effect on absolut positioned Div

Question

I am having some trouble using the slide effect (slideToggle, in this case) on some position:absolute Divs.

Before I've done the position work - I needed it for the border arrow - it worked perfectely. But, after I use position:absolute on divs the effect doens't work anymore. So, I believe it has something to do with the effect being made where the Div doesn't exist?

My HTML:

<div style="width: 200px; border-width: 1px; border: dotted" onclick="clickDiv();">
    click me
</div>
<div id="DivTeste">
    <div class="chat-bubble-arrow-border"></div>
    <div class="chat-bubble-arrow"></div>
    <div class="teste box">
        <p>e</p>
        <p>e</p>
        <p>e</p>
        <p>e</p>
        <p>e</p>
    </div>
</div>

My CSS:

.box {
   overflow: auto;
   display: block;
   height:100px;
   width: 200px;
   border-width: 1px;
   border: solid;
   top: 50px;
   position:absolute;
}

.chat-bubble-arrow-border {
   border-color: transparent transparent #000 transparent;
   border-style: solid;
   border-width: 10px;
   height:0;
   width:0;
   position:absolute;
   top: 30px;
   left:30px;
}


.chat-bubble-arrow {
   border-color: transparent transparent #fff transparent;
   border-style: solid;
   border-width: 10px;
   height: 0;
   width: 0;
   position: absolute;
   left: 30px;
   top: 33px;
   z-index: 100;
}

And my JS:

$(function () {
   $('#DivTeste').hide();
});

function clickDiv() {
   $('#DivTeste').slideToggle();
}

Answer 1

I just teaked the code and made it work with relative position.

Changed this two from class box:

   top: 16px;
   position: relative;

http://jsfiddle.net/sanman/4xsZM/

Why don't you use something like qTip for what it seems that you are trying to do.