【转】jQuery实现的简单文字提示效果模拟title

html:

<div ><a class='tooltip'  href='' title='点击查看职位'>职位名称</a></div>

<!-- 引用jQuery -->

 <script src="jquery.js" type="text/javascript"></script>

<style type="text/css">

body{

    margin:0;

    padding:40px;

    background:#fff;

    font:80% Arial, Helvetica, sans-serif;

    color:#555;

    line-height:180%;

}

p{

    clear:both;

    margin:0;

    padding:.5em 0;

}

/* tooltip */

#tooltip{

    position:absolute;

    border:1px solid #333;

    background:#f7f5d1;

    padding:1px;

    color:#333;

    display:none;

}

</style>

<script type="text/javascript">

//<![CDATA[

$(function(){

    var x = 10;  

    var y = 20;

    $("a.tooltip").mouseover(function(e){// a.tooltip也可换成DIV

           this.myTitle = this.title;

        this.title = "";    

        var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素 文字提示

        $("body").append(tooltip);    //把它追加到文档中

        $("#tooltip")

            .css({

                "top": (e.pageY+y) + "px",

                "left": (e.pageX+x)  + "px"

            }).show("fast");      //设置x坐标和y坐标，并且显示

    }).mouseout(function(){        

        this.title = this.myTitle;

        $("#tooltip").remove();   //移除 

    }).mousemove(function(e){

        $("#tooltip")

            .css({

                "top": (e.pageY+y) + "px",

                "left": (e.pageX+x)  + "px"

            });

    });

})

//]]>

当然也可以不使用原来的title,将原来的title去掉，自己手写相关内容

<style type="text/css">

/* tooltip */

#tooltip{

    position:absolute;

    border:1px solid #333;

    background:#f7f5d1;

    padding:5px;

    color:#333;

    display:none;

}

</style>

<script type="text/javascript" src="themes/ecshop_name1/js/jquery.tip.js"></script>

<script type="text/javascript">

$(document).ready(function() {

                           

    var x = 10;  

    var y = 20;

    $(".pmrhf").mouseover(function(e){

                myTitle =" 乐视购为您精确计算出每天使用隐形眼镜的真正花费,<br/><b>隐形眼镜类</b>：根据使用周期，每副的日均花费,<br/><b>护理液类</b>：清洗并储存隐形眼镜的日均花费,<br/><b>润眼液类</b>：使用润眼液的日均花";

        var tooltip = "<div id='tooltip'>"+  myTitle +"<\/div>"; //创建 div 元素 文字提示

        $("body").append(tooltip);    //把它追加到文档中

        $("#tooltip")

            .css({

                "top": (e.pageY+y) + "px",

                "left": (e.pageX+x)  + "px"

            }).show("fast");      //设置x坐标和y坐标，并且显示

    }).mouseout(function(){        

        $("#tooltip").remove();   //移除 

    }).mousemove(function(e){

        $("#tooltip")

            .css({

                "top": (e.pageY+y) + "px",

                "left": (e.pageX+x)  + "px"

            });

    });

});

    

</script>