jquery.tinyTips提示框插件一句代码实现鼠标悬停文字提示信息框内容



120 477 160



特效描述:提示框插件 鼠标悬停 文字提示信息框,一个轻量级的jQuery提示信息框插件tinyTips使用及下载,通过此插件只需要简单的一句代码即可实现动态提示信息框效果,经测试效果相当不错超酷,喜欢的朋友可以下载学习。

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="styles/tinyTips.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tinyTips.js"></script>

3. HTML代码

	<div id="demo_wrapper">
		<h1 class="massive">tinyTips</h1>
		<h1 class="tagline">Super-lightweight jQuery Tooltips.</h1>
		<p><img class="tTip" src="images/demo-image.jpg" title="Look at me, I'm a frog!" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
		<a class="tTip" href="#" title="This tooltip is using the title of this anchor tag.">Aenean ut nunc metus</a>, gravida tincidunt libero. 
		Proin molestie risus at odio luctus condimentum. Sed molestie bibendum orci a faucibus. Vivamus vel lorem ut augue laoreet cursus. 
		Maecenas vestibulum nibh non nibh viverra posuere. Sed <a class="tTip" href="#" title="This one is also using the title.">tristique eleifend</a> elit sit amet varius. 
		Curabitur augue purus, molestie eu hendrerit a, sollicitudin nec eros. Aliquam vitae pellentesque lorem. Vestibulum leo <a class="imgTip" href="#">tortor</a>, 
		luctus sed varius eu, ultrices ac sapien. Nulla pretium est eget mi 
		<a class="tTip" href="#" title="How about a really long one so we can test out positioning so it doesn't overlap the element the tooltip is for. 
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget purus a orci consequat congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
		Suspendisse porttitor scelerisque leo, ut elementum nisi fermentum ac. Etiam mauris tellus, ornare sit amet venenatis at, vehicula vitae purus. 
		Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.">dignissim</a> sed 
		tincidunt eros porta. In ligula mauris, aliquam quis tempor quis, consectetur a erat. Nulla non justo 
		pellentesque dui elementum pharetra nec eu magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
	</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 文字提示框 提示框/弹出层 layer lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 弹出层拖动 窗口提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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