鼠标放在图片上,出来小tips

1.引入Jquery.js

2.引入tipsy.js插件

　　

 

<!doctype html>
<html>
<head>
<!--@author:luowen @time:2014-02-24 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>test</title>
<style type="text/css">
#xx{width:100px; margin:100px;}
/*tipsy*/
.tipsy { padding: 5px;font-size:12px; position: absolute; z-index: 100000; }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; text-align: left; }
.tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-arrow { position: absolute; background: url(http://ossweb-img.qq.com/images/bns/act/a20131205intro/tipsy.gif) no-repeat top left; width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }
</style>
</head>
<body>
<h1 id="xx" original-title="我就是22323" >22323</h1>
<script src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.7.2.min.js"></script>
<script src="./js/tipsy.js"></script>
<script>
$(function(){
    $("#xx").tipsy({gravity: 's',live: true,html: true});
        });
</script>
</body>
</html>

 

ps:详细内容http://onehackoranother.com/projects/jquery/tipsy/

 

posted @ 2014-02-25 15:21  arvim  阅读(220)  评论(0)  编辑  收藏  举报