Question

我正在尝试通过javascript实现工具提示，就像当我们点击一个imageLlink时，应该显示工具提示，它应该有closebutton / close图像来隐藏该工具提示。就像我在我的页面上有多个图像的方式一样，每当我点击图像时，相应的工具提示应该显示在页面上，当我想要关闭时，只有它应该通过工具提示上的关闭按钮关闭。

任何人都可以帮助我，我需要一个示例来实现这一点。

我们可以通过java脚本进行，还是去jquery？

我是两个新人。

提前致谢。基兰。

Answer 1

您可以使用jQuery UI工具提示并覆盖默认的open方法（在鼠标焦点上）并将其绑定到图像的单击功能。您还可以在工具提示中添加一个关闭按钮，并将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

当我们点击多个图片链接时，多个工具提示将显示在同一页面上

2 个答案: