效果图，如下

spacer.gif

wKiom1LKXWqgZa0WAAA6WP1UWAs897.jpg

   代码如下：

   

<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>