基于jQuery实现工具提示插件



30 118 40



特效描述:基于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

加群请备注:从官网了解到