鼠标单击附近的工具提示位置 [英] tooltip position near the mouse click

问题描述

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

My scenario is described and partially solved here simple tooltips created using jquery 1.3.2 I want to show simple tooltip after click on a html element. However, on my page the html code for tooltip (.tooltip) is on different place of my page (bottom). Now I need it to show right under the clicked html element. So far the code looks like this:

$(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中单击鼠标右键显示它?非常感谢你.

And it works on my page like this http://jsfiddle.net/HUG2Z/15/ How can I achieve to show it right under mouse click in jquery 1.3.2? Thank you very much.

推荐答案

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

Just make the tooltip be absolutely positioned and change the call to offset() into a css()

为什么要在pageX和pageY上加上70?这样的鼠标不会正确.

Why are you adding 70 to pageX and pageY? It won't be right by the mouse like that.

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;

}

这篇关于鼠标单击附近的工具提示位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！