【12/18】Jquery-显示超链接提示

tooltip.js

相应的CSS样式：

#tooltips{
    position: absolute;
    border: 1px solid #333333;
    background: #f7f5d1;
    padding:1px;
    color: #333333;
    display: none;
}

为超链接元素添加class = \"tooltips\"和 属性，代码如下:

<li><a href=\"#\" class=\"tooltip\"  =\"提示文字\">提示文字</a></li>

Jquery部分的代码为 ：

$(function () {
       var x=10;
       var y=20;
       $(\"a.tooltips\").mouseover(function (e) {
           this.my  = this. ;
           this. =\"\";
           // 创建DIV
           var tooltip = \"<div id=\'tooltips\'>\"+ this.my  + \"</div>\";
           $(\"body\").append(tooltip);
           $(\"#tooltips\").css({
               \"top\":(e.pageY+y)+\"px\",
               \"left\":(e.pageX+x)+ \"px\"
           }).show(\"fast\");  //设置xy坐标，并且显示。
       }).mouseout(function () {
           this.  = this.my ;
           $(\"#tooltips\").remove();
       }).mousemove(function (e) {
           $(\"#tooltips\")
               .css({
               \"top\":(e.pageY+y)+\"px\",
               \"left\":(e.pageX+x)+ \"px\"
                });
       });