单击多个图像链接时，将在同一页面上显示多个工具提示

Question

我正在尝试通过javascript实现工具提示，比如当我们点击一个imageLlink时，工具提示应该被显示出来，并且它应该有关闭按钮/关闭图像来隐藏这个工具提示。就像我会在我的页面上有多个图像一样，每当我点击图像时，当我想关闭时，相应的工具提示应该显示在页面上，然后只有它应该通过工具提示上的关闭按钮关闭。

谁能在这方面帮助我，我需要一个示例来实现这一点。

我们可以通过java脚本来实现吗?还是使用jquery呢？

我对这两个都是新手。

提前谢谢。基兰。

Answer 1

您可以使用jQuery UI工具提示，覆盖默认的打开方法(在鼠标焦点上)，并将其绑定到图像的单击函数。您还可以在工具提示中添加一个close按钮，并将Close方法绑定到该按钮。参考：http://api.jqueryui.com/tooltip/#method-open

您还可以查看这些jquery插件。

http://tooltipsy.com/

Answer 2

    HTML CODE: 

   <div>
    <div class="tes_div">
        <img  class="test_img" src="http://sim02.in.com/c3aa4dc6853667b08505c83b605b3061_ft_xl.jpg" height="100px", width="100px"> </img>
        <div class="close_button" >"teststts" </div>
    </div>
    <div class="tes_div">
        <img  class="test_img" src="http://sim02.in.com/c3aa4dc6853667b08505c83b605b3061_ft_xl.jpg" height="100px", width="100px"> </img>
        <div class="close_button" >"teststts" </div>
    </div>
    <div class="tes_div">
        <img  class="test_img" src="http://sim02.in.com/c3aa4dc6853667b08505c83b605b3061_

    ft_xl.jpg" height="100px", width="100px"> </img>
            <div class="close_button"

 >"teststts" </div>
    </div>
    <div class="tes_div">
        <img  class="test_img" src="http://sim02.in.com/c3aa4dc6853667b08505c83b605b3061_ft_xl.jpg" height="100px", width="100px"> </img>
        <div class="close_button" >"teststts" </div>
    </div>
    <div class="tes_div">
        <img  class="test_img" src="http://sim02.in.com/c3aa4dc6853667b08505c83b605b3061_ft_xl.jpg" height="100px", width="100px"> </img>
        <div class="close_button" >"teststts" </div>
    </div>
    <div class="tes_div">
        <img  class="test_img" src="http://sim02.in.com/c3aa4dc6853667b08505c83b605b3061_ft_xl.jpg" height="100px", width="100px"> </img>
        <div class="close_button" >"teststts" </div>
    </div>

</div> 
  Jquery code 

$('.test_img').click(function(){


    $(this).next().addClass('testts_div');
});

$('.close_button').click(function(){

$(this).removeClass('testts_div');

});


AND CSS 


.testts_div{
    background:#000;
    color:#fff;
    position:absolute;
    display:block !important;
    top:0px;
    left:20px;
}

.tes_div{

    position:relative;

}
.close_button{
    display : none;
}





in the div( class= "close button") . you can write close button div and you can show and hide it