jQuery自制提示框工具提示改进版

自带的标题的提示效果的响应速度是非常缓慢的，使用jQuery自制提示工具提示！

HTML:

pa href='#' title='超链接提示1' class='工具提示'提示1/a/ppa href='#' title='超链接提示2' class='工具提示'提示2/a/ppa href='#' title='自带超链接提示1'自带超链接提示1/a/ppa href='#' title='自带超链接提示2'自带超链接提示2/a/pCSS:

p a {显示：块；宽度宽度：150像素高度：50 px线高：50 px背景# ff3366 color : # fffborder-radius : 3px；文本对齐：中心；} # tooltip { position : absolute；宽度宽度：200像素高度：50 px线高：50 pxborder:1px固体# ccc文本对齐：中心；盒影： 1px 1px 2px # CCC背景# fffborder-radius :5 px；}JQ:

$(function(){ var x=10，y=20//使得鼠标相对于工具提示偏离的距离$('a.tooltip ').鼠标悬停(函数{这个。my TItle=这个。TItle//获取标题，临时存储this.title=//避免和原生提示重复var tooltip=' div id=' tooltip ' '这。my title '/div '；$(“正文”).追加（工具提示);//css()设置样式$(“# tooltip”).css({ 'top':(e.pageY y) 'px '，//e.pageX相对与文档，e.clientX相对于可视区左：(e.pageX x) 'px '，}).show(' fast ')；}).鼠标移出(函数(){ this。标题=这个。我的头衔；//重复恢复$(“# tooltip”).移除();//记得要把生成的结点移除掉}).鼠标移动(函数(e){ $('#tooltip ').css({ 'left':(e.pageX x) 'px '，' top ' :(e . Pagey)' px '，})；});});改进版：将上面的工具提示内容加上图片预览！

JQ:

$(function(){ var x=10，y=20$('a.tooltip ').鼠标悬停(函数{这个。my TItle=这个。TItlethis . title=var imgTitle=this . my title？br/span id=“tool tips pan”此。my TItle '/span ' : '；var tooltip=' div id=' tooltip ' img src=' this。href ' ' alt='产品预览图/' IMgtitle '/div '；$(“正文”).追加（工具提示);$(“# tooltip”).css({ 'top':(e.pageY y) 'px '，' left':(e.pageX x) 'px '，}).show(' fast ')；}).鼠标移出(函数(){ this。标题=这个。我的头衔；$(“# tooltip”).移除();}).鼠标移动(函数(e){ $('#tooltip ').css({ 'top':(e.pageY y) 'px '，' left':(e.pageX x) 'px '，})})；});以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。