Question

我的方案在此处被描述并部分解决simple tooltips created using 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中单击鼠标右键显示？非常感谢你。

Answer 1

只需将工具提示置于绝对位置，然后将对offset()的调用更改为css()

为什么要向pageX和pageY添加70？这样的鼠标不会是正确的。

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;

}

Answer 2

以下是您的代码的更新：

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

首先，您需要将工具提示置于绝对位置，以便它在正常的盒子模型之外运行，并且可以定位在任何地方。左边和上边的属性甚至没有踢，因为默认情况下大多数元素都有静态位置。在开始用jQuery操作它之前，您应该更深入地了解整个位置主题（实际上并不复杂）。

鼠标点击附近的工具提示位置

2 个答案: