position div as bottom center under a image using jquery
<p>i have one image and i want that when i will home mouse on the image then a div will be shown just under the image as bottom center. here i am giving a url just have look that how i want to show my tooltip div just under the image. <a href="http://i.stack.imgur.com/aUNKE.png" rel="nofollow">http://i.stack.imgur.com/aUNKE.png</a></p>

<p>i dont want to use any plugin. rather i want code my self. i wrote the below code to have the same effect. my code is working but my tooltip div is not appear like bottom center. i am not being able to figure out what to change in the code. i want to set the position by code not by static css.</p>

<p>here is my code</p>

<pre><code>&lt;div class="image" style="margin:0px 25px; position:relative;background:black;  height:50px; width:50px;left:200px;top:200px" /&gt;

&lt;div class="tooltip" style="position:absolute;display:none; background:red; height:50px; width:100px;"&gt;
&lt;/div&gt;

$(".image").hover(function() {
var xtop=($('.image').height()+2);
//var xwidth=$('.image').width();

$(".tooltip").css('margin-Top',xtop+'px')
//$(".tooltip").css('Left',xwidth+'px')

//alert($('.tooltip').left());
//alert(xwidth);

$(".tooltip").show();
}, function() {
$(".tooltip").hide();
})
</code></pre>

<p>if possible please change my code to have the effect as i need. thanks</p>

<hr>

<p>again i am adding the code...it is not working well. the tooltip is not appearing under the image div.</p>

<pre><code> &lt;div&gt;
&lt;div class="image" style="margin:0px 25px; position:relative;background:black;  height:50px; width:50px;left:200px;top:200px" &gt;
&lt;img id="logo" src="images/warranty2.jpg" border="0" /&gt;
&lt;/div&gt;
&lt;div class="tooltip" style="position:absolute;display:none; background:red; height:50px; width:100px;"&gt;
Hello.......
&lt;/div&gt;
&lt;/div&gt;

 $(document).ready(function() {
        $(".image").hover(function () {
        var $tt = $(".tooltip");
        var imageWidth = parseInt($(this).width());
        var tooltipWidth = parseInt($tt.width());

        var Imgtop = ($(this).height() + 2);
        var ImgLeftMargin = (tooltipWidth - imageWidth) / 2;

        $tt
    .css({ marginTop: Imgtop + 'px',
        marginLeft: -ImgLeftMargin + 'px'
    })
    .show();
    }, function () {
        $(".tooltip").hide();
    });
});
</code></pre>
