Question

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. https://i.stack.imgur.com/aUNKE.png

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.

here is my code

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

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

$(".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();
})

if possible please change my code to have the effect as i need. thanks

---

again i am adding the code…it is not working well. the tooltip is not appearing under the image div.

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

 $(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();
    });
});

Answer 1

$(".image").hover(function() {
    var $tt = $(".tooltip");
    var $this = $(this);
    var top = $this.offset().top + $this.width() + 2;
    var left = $this.offset().left - $this.height() / 2;  

    $tt.css({ top: top, left: left }).show();
}, function() {
    $(".tooltip").hide();
})

Code: http://jsfiddle.net/rGhzk/6/