jQuery tips提示框支持图片

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<head>
<title>jQuery动态信息提示框tips</title>
<style>
*{
	margin:0;
	padding:0;
}
body{
	background:#999;
	color:#000;
	font:15px Calibri, Arial, sans-serif;
	text-shadow:1px 2px 1px #FFFFFF;
}
#main a,#main a:visited{
	text-decoration:none;
	outline:none;
	color:#f60;
}
#main a:hover{
	text-decoration:underline;
	cursor: help;
}
#main{
	margin:150px auto;
	width:660px;
	overflow:auto;
	background:#f9f9f9;
	padding:15px;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkt-border-radius:10px;
	border:5px solid #777;
}
#main p{
	float:left;
	width:440px;
}
#main img{
	border:5px solid #777;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkt-border-radius:10px;
	float:left;
}
a,a:visited{
	text-decoration:none;
	outline:none;
	color:#ccc;
}
#tooltip {
	border: 1px solid #444;
	font-size: 14px;
	max-width: 205px;
	padding:1em;
	position: absolute;
	z-index:2000;
	text-shadow:none;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}
</style>
</head>
<body>
<section id="main">
   <h2>鼠标放在带链接的内容上，显示 tooltip</h2>
<p>Suspendisse imperdiet ullamcorper est at interdum.<a href="" class="tooltip" title="这是一个标题"> Suspendisse at felis nunc.</a> Integer eu felis lacus, id blandit augue. Mauris commodo hendrerit risus, quis vehicula mi adipiscing in. Integer nec pretium
   odio. Sed ligula enim, scelerisque ut tempor lacinia, iaculis eget erat. Integer eu felis lacus, id blandit augue. Mauris commodo hendrerit     risus, quis vehicula mi adipiscing in. <a href="" class="tooltip" title="好玩的提示框.">Integer nec pretium odio.</a>
    Sed ligulaenim, scelerisque ut tempor lacinia, iaculis eget erat. Integer eu felis lacus, id blandit augue.
    Mauris commodo hendrerit risus, <a href="" class="tooltip" title=" <img src='//ku.shouce.ren/files/images/201601/56a3690a10b88.png' /> Web development tutorials and resources .">quis vehicula mi adipiscing in.</a>
    Integer nec pretium odio. Sed ligula enim, scelerisque ut tempor lacinia, iaculis eget erat.
      <br /><br />
      Follow me on <a href="/" class="tooltip" title="@Tutorialpot on twitter" >TWITTER</a>
      & grab the <a href="/" class="tooltip" title="Straight to your inbox  Be the first to know" >RSS FEED</a></p>
    <img class="tooltip" title="jQuery tooltip" src="//ku.shouce.ren/files/images/201601/56a3690a10b88.png" />
</section>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
//jQuery.toolTip.js
(function($){
	$.fn.toolTip = function(options) {
		var defaults = {
		  	background: '#1e2227',
			color: '#fff',
			opacity: '0.8'
		},
		 options = $.extend(defaults, options);
		 return this.each(function() {
		  	var elem = $(this);
		 var title = elem.attr('title');
			if(title != '') {
			var tooltip = $('<div id="tooltip" />');
				elem.attr('title','');
				elem.hover(function(e) {
					tooltip.hide().appendTo('body')
					  .html(title)
					  .hide()
					  .css({
					  	'background-color' : options.background,
						'color' : options.color,
						'opacity' : options.opacity,
					 })
					  .fadeIn(500);
				},
				 function() {
					tooltip.remove();
				});
			}
			elem.mousemove(function(e) {
				tooltip.css({
					top: e.pageY + 10,
					left: e.pageX + 20
			     });
			});
		  });
	}
})(jQuery);
$(document).ready(function(){
	$('.tooltip').toolTip();
});
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

jQuery tips提示框支持图片

分类

jQuery实例

描述

jQuery简洁实用的动态信息提示框tips，是对 a标签中的title属性的另类用法，以前就看到不少国外的网站这么使用“title”,此前真不知可以这么用。本效果确实不错，而且加入了渐变特效，还可在弹出的提示框中使用图片，记的要看代码，...