基于jQuery實現工具提示插件



36 141 48



特效描述:基于jQuery實現 工具提示插件,基于jQuery實現工具提示插件

代碼結構

1. 引入CSS

<link href="css/demo.css" rel="stylesheet" type="text/css" media="all" />
<link href="http://formstone.it/css/demo.ie.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/jquery.fs.tipper.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/demo.css" rel="stylesheet" type="text/css" media="all" />
<link href="http://formstone.it/css/demo.ie.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/jquery.fs.tipper.css" rel="stylesheet" type="text/css" media="all" />

2. 引入JS

<script src="js/demo.js"></script>
<script src="js/jquery.fs.tipper.js"></script>
<script src="js/demo.js"></script>
<script src="js/jquery.fs.tipper.js"></script>

3. HTML代碼

<!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></title>
		<!--[if LTE IE 8]>
		<![endif]-->
		<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';">
</div>
</body>
</html>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 鼠標懸停 文字提示框 提示文字 按鈕樣式
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子