用jquery 做自己的tooltips

最新推荐文章于 2023-04-11 08:47:57 发布

不断学习的ITer

最新推荐文章于 2023-04-11 08:47:57 发布

阅读量1.1k

点赞数

分类专栏： Jquery/Javascript 文章标签： jquery function scroll div table class

本文链接：https://blog.csdn.net/wyqlxy/article/details/6881063

版权

Jquery/Javascript 专栏收录该内容

103 篇文章 0 订阅

订阅专栏

需求：希望鼠标放到左边的列表上，右边动态出现相应的提示信息。

代码实现：左边我使用TABLE布局的，

                              <table>                                
				 <tr>
                                    <td >
                                        <div style="position:relative">
                                        平均服务周期
                                            <div class="tooltip">
                                              第一步:您所选的专业导师起草写作主题、思路;确定写作中哪些是重点、次重点和非重点内容.
                                              <br />
                                              第二步:用明确语言列出申请文书的的写作大纲.让您提笔就能轻松开始将自己的亮点赋予申请文书之中.
                                            </div>
                                       </div>
                                    </td>
                                </tr>
                              </table>

样式 tooltip

.tooltip
{
	background:url("../_Img/tip.png") no-repeat scroll 0 0 transparent;	
	height:124px;
	width:260px;
	position:absolute;
	left:225px;
	top:-48px;
	padding-left:30px;
    color:#fff;
    display:none;
    line-height:140%;
    padding-top:10px;
	
}

红色部分：是我们进行绝对定位时候设置的数值，根据布局动态调整

        $(document).ready(function(){
            $("#div30 .detailfirstcol").hover(function(){
                $(this).find(".tooltip").show();
            },function () {
                $(this).find(".tooltip").hide();
            });
        })

用了jquery 的hover 进入和退出事件，这样，就会出现我们想要的效果了

NOTE:

td 没有 postion:relative属性，所以只能在里面方式一个div，设置这个属性。这点要注意。