jQuery实现工具提示元素定位显示功能示例

本文实例讲述了jQuery实现工具提示元素定位显示功能的方法。分享给大家供大家参考，具体如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题页/title脚本类型=' text/JavaScript ' src=' http : jquery-1。4 .2 .量滴js '/script脚本类型=' text/JavaScript '函数ShowTip(事件、obj、消息){ var xOffset=-10；//x距鼠标var yOffset的距离=10;//距鼠标的y距离//obj。风格。top=(事件。client x YofSet)' px '；//obj。风格。左=(事件。client y xOffset)' px '；//获取元素宽度：美元。宽度();//获取元素高度：$(obj).高度()//获取元素位置：$(obj).位置()。顶端和美元.偏移量()。top $(“正文”).追加(' div id=' tip message ' ' message '/div ')；$(“div #提示消息”).css('top '，$(obj).位置()。最高价.高度()" px ").css('left '，$(obj).位置()。左" px ").fadeIn('慢');}函数HideTip() { $('div#tipmessage ').淡出("慢")。移除();}/脚本样式类型=' text/CSS ' # tip message { display : none；z指数：1000;border:1px固体# 448833;位置：绝对；背景： # ffffff最大宽度宽度：200像素最大高度：30 pxpadd :5 px 10px }/style/head dya href=' # ' on mouseover=' show tip(事件，此，'欢迎访问我们)" onmouseout=" HideTip()" Tip/a/body/html运行效果截图如下：

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery常用插件及用法总结》 、 《jQuery扩展技巧总结》 、 《jQuery切换特效与技巧总结》 、 《jQuery遍历算法与技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。