如何使用纯javascript制作工具提示（onclick show / dismiss）

Question

我需要使用一些JS没有JQuery插件来制作一个简单的工具提示。

当我点击图像时，我想显示带有三角形角的div，下面是带有一些文字的图像。

我谷歌和谷歌，但没有找到任何东西。

只需点击图片即可显示信息，然后点击相同图片即可关闭它，但无法弄清楚如何执行此操作。

Answer 1

如果您愿意使用jquery，而不是插件，那么这可以非常简单地完成。

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

单击而不是悬停：

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