<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Tipper Demo</title>
<link href="css/demo.css" rel="stylesheet" type="text/css" media="all" />
<!--[if LTE IE 8]>
<link href="http://formstone.it/css/demo.ie.css" rel="stylesheet" type="text/css" media="all" />
<![endif]-->
<script src="js/demo.js"></script>
<link href="css/jquery.fs.tipper.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.fs.tipper.js"></script>
<style>
.tipped { background: #999; clear: both; float: none; display: block; margin: 20px auto; width: 50%; }
.tipped:hover { background: #777; }
</style>
<script>
$(document).ready(function() {
$(".tipped").tipper();
});
</script>
</head>
<body class="gridlock demo">
<article class="row page">
<div class="mobile-full tablet-full desktop-8 desktop-push-2">
<div class="clear_fix">
<a href="#" class="button tipped" data-title="Great New Tooltip" data-tipper-options='{"direction":"left"}'>Left</a>
<a href="#" class="button tipped" data-title="Great New Tooltip" data-tipper-options='{"direction":"right"}'>Right</a>
<a href="#" class="button tipped" data-title="Great New Tooltip" data-tipper-options='{"direction":"top"}'>Top</a>
<a href="#" class="button tipped" data-title="Great New Tooltip" data-tipper-options='{"direction":"bottom"}'>Bottom</a>
</div>
<div class="clear_fix">
<a href="#" class="button tipped" data-title="Great New Tooltip" data-tipper-options='{"direction":"left","follow":"true"}'>Left</a>
<a href="#" class="button tipped" data-title="Great New Tooltip" data-tipper-options='{"direction":"right","follow":"true"}'>Right</a>
<a href="#" class="button tipped" data-title="Great New Tooltip" data-tipper-options='{"direction":"top","follow":"true"}'>Top</a>
<a href="#" class="button tipped" data-title="Great New Tooltip" data-tipper-options='{"direction":"bottom","follow":"true"}'>Bottom</a>
</div>
<br />
</div>
</article>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
