如何使用纯 javascript 制作工具提示 (onclick show/dismiss)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20153882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make tooltip with pure javascript (onclick show/dismiss)
提问by 1110
I need to use some JS no JQuery plugins to make a simple tooltip.
我需要使用一些 JS 没有 JQuery 插件来制作一个简单的工具提示。
When I click on image I want to display div with triangle corner bellow that image with some text inside.
当我点击图像时，我想在图像下方显示带有三角形角的 div，里面有一些文字。
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.
只需单击图像以显示信息，然后单击相同的图像即可关闭它，但无法弄清楚如何执行此操作。
回答by user2938649
If you're willing to use jquery, but not a plugin, then this can be done pretty simply.
如果您愿意使用 jquery 而不是插件，那么这可以很简单地完成。
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:
对于点击而不是悬停：
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});
}
});
