jQuery實現的簡單文字提示效果模擬title(轉) - KeenLeung－IT工程師數位筆記本

文章出處

來源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html

模擬title實現效果，可以修改文字的樣式，換行等。

先看下效果截圖：

代碼分析：

<!-- 引用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){
           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>