Jquery 简单提示框-原创手记-慕课网

代码如下：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script type="text/javascript" >$(document).ready(function() {            // 文字带边框提示条提示条$('#masterTooltip1').hover(    function(){                        // 鼠标悬浮经过事件        var title = "jQuery简单提示条";        //$(this).data('tipText', title);        $('<p class="tooltip"></p>')            .text(title)            .appendTo('.container')            .fadeIn('slow');    },    function() {        // 鼠标悬浮离开事件        $('.tooltip').remove();    }).mousemove(        function(e) {            var mousex = e.pageX + 2; //获得X轴坐标            var mousey = e.pageY + 1; //获得Y轴坐标            $('.tooltip').css({ top: mousey, left: mousex });});});</script><style>            .tooltip {    display:none;    position:absolute;    border:1px solid #9abbe8;    background-color:white;    -webkit-border-radius: 20px;    -moz-border-radius: 20px;    border-radius: 20px;    -webkit-box-shadow: #9abbe8 1px 5px 20px;    -moz-box-shadow: #9abbe8 1px 5px 20px;    box-shadow: #9abbe8 1px 5px 20px;    padding:10px;    color:black;    font-size:12px;    width: 120px;    white-space: normal;    z-index: 1000;}</style><body><div class="container"><h1>如何制作jQuery效果</h1><h2>jQuery简单提示条</h2><h2>鼠标经过</h2>     <img id="masterTooltip1" src="aboutus.png"/><div class="container"></div></body>