خودتان امتحان کنید

مشاهده نتیجه:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://code.nath.co/src/jQuery.min.js"></script>
<script src="https://rawgit.com/nathco/jQuery.mousetip/master/jQuery.mousetip.js"></script>
<script type="text/javascript">

    $(function() {
        
        $('div').mousetip('span');

    });
        
    </script>
<style>
    html, body {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 13px;
        text-align: center;
        width: 100%;
        height: 100%;
        margin:0;
        padding: 0;
        background: #fff;
    }
    a:first-of-type {
        position: fixed;
        top: 0;
        right: 0;
        padding: 10px 20px;
        line-height: 100%;
        text-decoration: none;
        color: #111;
        background: #111;
    }
    a:last-of-type {
        position: fixed;
        bottom: 30px;
        left: 30px;
        line-height: 100%;
        text-decoration: none;
        color: #333;
        background: #111;
        font-size: 15px;
    }
    a:first-of-type:hover {
        background: #777;
    }
    a:last-of-type:hover {
        color: #555;
    }
    div {
        float: left;
        width: 150px;
        height: 150px;
        line-height: 200px;
	    border-radius:10px;
        margin: 50px 0 0 50px;
        background: #660066;
    }
    span {
        position: absolute;
        z-index: 2;
        display: none;
        font-size: 13px;
        line-height: normal;
        max-width: 150px;
        height: auto;
        padding: 10px;
        border-radius: 3px;
        background: #FF0;
    }        
    
</style>
<title>???? ?????? ????? ?? jQuery</title>
</head>
<body>

<div>content<span >Mousetip 1</span></div>
<div>beyamooz<span><img src="img/beyamooz_logo.png"  width="110px" height="40px" /></span></div>
<div>Content<span >Mousetip 2</span></div>
</body>
</html>

خودتان امتحان کنید Beyamooz.com

کد بالا را ویرایش کنید و برای مشاهده نتیجه روی دکمه "ویرایش کردن" کلیک کنید.