How to make tooltip with pure javascript (onclick show/dismiss) [closed]

问题

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 6 years ago.

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.

回答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});
    }
});

来源：https://stackoverflow.com/questions/20153882/how-to-make-tooltip-with-pure-javascript-onclick-show-dismiss