如何使用纯JavaScript制作工具提示（onclick show / dismiss） [英] How to make tooltip with pure javascript (onclick show/dismiss)

问题描述

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

当我点击图像我想显示div与三角角落下的图像

只要点击图片即可显示信息，然后点击相同的图像来关闭它，但不能弄清楚如何做到这一点。
0047
>

解决方案

如果你愿意使用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}）; 
} 
} 
  

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.

解决方案

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

这篇关于如何使用纯JavaScript制作工具提示（onclick show / dismiss）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！