1

我的场景在此处描述并部分解决了使用 jquery 1.3.2 创建的简单工具提示 我想在单击 html 元素后显示简单的工具提示。但是，在我的页面上，工具提示 (.tooltip) 的 html 代码位于我页面的不同位置（底部）。现在我需要它显示在点击的 html 元素的正下方。到目前为止，代码如下所示：

$(document).ready(function(){

$('.somefield').click(showBox).mouseleave(hideBox);

function showBox(e){
    var x = e.pageX + 20;
    var y = e.pageY + 20;
    $('.tooltip').fadeIn();
    $('.tooltip').offset({ left: x, top: y });
}

function hideBox(){
    $('.tooltip').fadeOut();
}
});

它可以像这样在我的页面上运行http://jsfiddle.net/HUG2Z/15/ 我如何才能在 jquery 1.3.2 中通过鼠标单击来显示它？非常感谢你。

4

2 回答 2

1

只需使工具提示绝对定位并将调用更改offset()为css()

为什么要在pageXand上加 70 pageY？那样的鼠标不会对的。

http://jsfiddle.net/HUG2Z/22/

$(document).ready(function(){

    $('.somefield').click(showBox).mouseleave(hideBox);

    function showBox(e){
        $('.tooltip').fadeIn().css(({ left: e.pageX, top: e.pageY }));
    }

    function hideBox(){
        $('.tooltip').fadeOut();
    }
});

CSS

.tooltip {
    margin:10px;
    padding:12px;
    border:2px solid #666;
    width:60px;
    position: absolute;
    display: none;

}
于 2012-11-16T19:57:14.143 回答
0

这是您的代码的更新：

http://jsfiddle.net/HUG2Z/19/

最重要的事情发生在这里：

.tooltip {
    margin:10px;
    padding:12px;
    border:2px solid #666;
    width:60px;
    **position: absolute;**
    display: none;
}

和这里

$('.tooltip').css({ left: x, top: y });

首先，您需要定位工具提示绝对位置，使其在正常盒子模型之外运行并且可以定位在任何地方。left 和 top 属性甚至没有生效，因为默认情况下大多数元素的位置都是静态的。在开始使用 jQuery 操作它之前，您可能应该更深入地研究整个职位主题（实际上并不那么复杂）。

于 2012-11-16T19:58:27.417 回答