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

我的场景被描述并部分解决了这里使用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操作它之前，您应该更深入地了解整个位置主题（实际上并不复杂）。