鼠标放在图片上,出来小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/

 

你可能感兴趣的:(tips)