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

 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">
//
$(function(){
    var x = 10;  
    var y = 20;
    $("a.tooltip").mouseover(function(e){
           this.myTitle = this.title;
        this.title = "";    
        var tooltip = "

"+ this.myTitle +""; //创建 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 =" 乐视购为您精确计算出每天使用隐形眼镜的真正花费,
隐形眼镜类：根据使用周期，每副的日均花费,
护理液类：清洗并储存隐形眼镜的日均花费,
润眼液类：使用润眼液的日均花";
        var tooltip = "

"+  myTitle +""; //创建 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>

 
 
 
 
 
jQuery实现的简单文字提示效果模拟title(转),搜素材,soscw.com
jQuery实现的简单文字提示效果模拟title(转)
标签：style   class   blog   code   java   http   
原文地址：http://www.cnblogs.com/KeenLeung/p/3794790.html