Question

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

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.

Answer 1

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

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;

}