Question

我有一个图像，我希望当我将鼠标放在图像上时，div将显示在图像下方作为底部中心。在这里我给的网址只是看看我想如何在图像下显示我的工具提示div。 http://i.stack.imgur.com/aUNKE.png

我不想使用任何插件。相反，我想要代码我自己。我写下面的代码有相同的效果。我的代码正在运行，但我的工具提示div看起来不像底部中心。我无法弄清楚代码中要改变什么。我想通过代码而不是静态CSS来设置位置。

这是我的代码

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

如果可能请更改我的代码以获得我需要的效果。感谢

我再次添加代码......它运行不正常。工具提示未出现在图像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();
})

代码：http://jsfiddle.net/rGhzk/6/

Answer 2

检查这个小提琴：http://jsfiddle.net/fuPH5/1/

代码：

$(".image").hover(function() {
    var xtop = $('.image').offset().top + $('.image').height() + 2;
    var xleft = $('.image').offset().left + $('.image').width() / 2;
    xleft -= $(".tooltip").width() / 2;
    $(".tooltip").show();
    $(".tooltip").css('top', xtop + 'px');
    $(".tooltip").css('left', xleft + 'px');

}, function() {
    $(".tooltip").hide();
});

使用jquery将div定位为图像下方的底部中心

2 个答案: