如何使用纯 Javascript 制作工具提示（onclick show/dismiss）[关闭]答案

【问题标题】：How to make tooltip with pure Javascript (onclick show/dismiss) [closed]如何使用纯 Javascript 制作工具提示（onclick show/dismiss）[关闭]
【发布时间】：2013-11-22 20:26:31
【问题描述】：

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

当我单击图像时，我想在该图像下方显示带有三角形角的 div，其中包含一些文本。

我用 Google 和 Google 都没有找到任何东西。

简单地点击图片来显示信息，点击同一张图片来关闭它，但不知道怎么做。

【问题讨论】：

作为三角形？在角落里？
您不想使用预制的 jquery 插件还是根本不想使用 jquery？
@some 是方形图像 40x40px，当我单击它以在其下方显示一个带有三角形的 div 时，右上角只是图像下方。
@user2938649 没有 jquery
@user2938649 jquery 很好但是not the answer to everything。发帖人专门要求提供纯 JavaScript 解决方案。我不知道这种情况下的原因，但是不使用 jquery 是很有教育意义的，而且如果没有它，它的代码会更加清晰易懂。

标签： javascript html css dom-events tooltip

【解决方案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});
    }
});

【讨论】：

不，抱歉，也许我没有说对我想做的事。我添加了一个示例的图像。
@1110 这与您最初写的相差甚远。如果您接受 user2938649 的回答并提出一个新问题，那就太好了。
好的，我会做的，抱歉我不够清楚
如果你能帮我，我把它放在这里stackoverflow.com/questions/20154572/…
@Kay So 1110 特意要求一个没有jquery 的纯javascript 解决方案，你让他接受一个使用jquery 的答案？我承认查询不清楚，但这就是 cmets 的用途，以获得澄清。然而，从一开始就很明显 1110 想要一个纯 javascript，非 jquery 解决方案。