How to make tooltip with pure javascript (onclick

Question

I need to use some JS no JQuery plugins to make a simple tooltip.

When I click on image I want to display div with triangle corner bellow that image with some text inside.

I google and google and didn't find anything.

Simple click on image to show info and click on same image to dismiss it but can't figure out how to do this.

Answer 1

If you're willing to use jquery, but not a plugin, then this can be done pretty simply.

http://jsfiddle.net/GQE4k/

var h = false;
$("#container").hover(function(){
    if (h == false){
        $("#popUp").fadeIn();
        $("#popUpText").fadeIn();
        h = true;
    }
},function(){
    if (h == true){
        $("#popUp").fadeOut();
        $("#popUpText").fadeOut(function(){h=false});
    }
});

For click instead of hover:

http://jsfiddle.net/GQE4k/1/

var h = false;
$("#container").click(function(){
    if (h == false){
        $("#popUp").fadeIn();
        $("#popUpText").fadeIn(function(){h = true;});
    }
    if (h == true){
        $("#popUp").fadeOut();
        $("#popUpText").fadeOut(function(){h=false});
    }
});