jQuery: Tooltip Visibility

Question

Hello,

I currently have the following Javascript on my page:

function tooltip(top, left, speed, easing, callback) {
    $(".tooltip").css({"margin-top": top, "margin-left": left});
    var state;

    if(state!="1") {
        if($(".tooltip .anchor").css("display")=="none") {
            var state="1";
            $(".tooltip .anchor").fadeIn("250");
            $(".tooltip .bubble").fadeIn("250");
        }
        else {
            var state="0";
            $(".tooltip .anchor").fadeOut("250");
            $(".tooltip .bubble").fadeOut("250");
        }
    }
}

...and the following HTML:

<a href="javascript:;" onclick="board();"><span class="icon index">Board Index</span></a><a href="javascript:;" onclick="tooltip('10px', '140px', 'slow');"><span class="icon info">Information</span></a><a href="javascript:;" onclick="tooltip('10px', '225px', 'slow');"><span class="icon reply">Reply</span></a><a href="javascript:;"><span class="icon report">Report</span></a>

The HTML ("Information" and "Reply", so far) link to the function "tooltip", which toggles the display of the tooltip.

My problem is this: ideally, I would be able to press one button, then click on another button without toggling the display of the tooltip - only the position and the content. Is this possible?

Thanks so much in advance!

Answer 1

So many strange things with the state variable in your example -- here is a re-write with those fixed:

function tooltip(top, left, speed, easing, callback) {
    $(".tooltip").css({"margin-top": top, "margin-left": left});
    var state;

    if(state != 1) {
        if($(".tooltip .anchor").css("display")=="none") {
            state = 1;
            $(".tooltip .anchor").fadeIn("250");
            $(".tooltip .bubble").fadeIn("250");
        }
        else {
            state = 0;
            $(".tooltip .anchor").fadeOut("250");
            $(".tooltip .bubble").fadeOut("250");
        }
    }
}

First don't make it a string and second don't re-declare (and hide the other) in the if statements.

Answer 2

I don't really understand what you are trying to do but look at this link and see if it is the desired result that you want. You can view the source to see how i did it. Also, in my example, the tooltip will show absolutely positioned to the x and y coordinates of the current mouse position.