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

multiple tool tips to be displayed on same page when we click multiple imagelinks

本文关键字：一页 工具提示 显示 单击 我们 图像 链接      更新时间：2023-09-26

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

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

我们可以通过Java脚本还是使用jQuery来做到这一点？

我对两者都是新手。

提前谢谢。基兰。

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

你也可以检查这些jquery插件。
http://tooltipsy.com/

    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
相关文章：