如何使纯JavaScript的工具提示（onclick显示/解雇）

Question

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

当我点击图像时，我想显示带有三角形角的波纹管，里面有一些文字的图像。

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

只需单击图像显示信息，然后点击相同的图像来解雇它，但无法弄清楚如何做到这一点。

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