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

问题描述：

此处描述并部分解决了我的情况使用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;

}

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

相关推荐