tooltip和title美化网站提示教程

美化演示

教程简介

浏览器自带的alt和title提示太丑了，所以我们需要美化一下，百度有许多，不过对我们这些小白来说很难。

第一步

放以下js到公用js里面

var sweetTitles = {
	x: 10,
	y: 20,
	tipElements: "a,span,img,div ",
	noTitle: false,
	init: function() {
		var b = this.noTitle;
		$(this.tipElements).each(function() {
			$(this).mouseover(function(e) {
				if (b) {
					isTitle = true
				} else {
					isTitle = $.trim(this.title) != ''
				}
				if (isTitle) {
					this.myTitle = this.title;
					this.title = "";
					var a = "<div class='tooltip'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='tipsy-inner'>" + this.myTitle + "</div></div>";
					$('body').append(a);
					$('.tooltip').css({
						"top": (e.pageY + 20) + "px",
						"left": (e.pageX - 20) + "px"
					}).show('fast')
				}
			}).mouseout(function() {
				if (this.myTitle != null) {
					this.title = this.myTitle;
					$('.tooltip').remove()
				}
			}).mousemove(function(e) {
				$('.tooltip').css({
					"top": (e.pageY + 20) + "px",
					"left": (e.pageX - 20) + "px"
				})
			})
		})
	}
};
$(function() {
	sweetTitles.init()
});

第二步

css也是

/*tips*/
	.tooltip {
	font-size:12px;
	position:absolute;
	padding:5px;
	z-index:100000;
	opacity:.8;
	font-family:Microsoft Yahei
}
.tipsy-arrow {
	position:absolute;
	width:0;
	height:0;
	line-height:0;
	border:6px dashed #000;
	top:0;
	left:20%;
	margin-left:-5px;
	border-bottom-style:solid;
	border-top:0;
	border-left-color:transparent;
	border-right-color:transparent
}
.tipsy-arrow-n {
	border-bottom-color:#666
}
.tipsy-inner {
	background-color:#666;
	color:#FFF;
	max-width:200px;
	padding:5px 8px 4px 8px;
	text-align:center;
	border-radius:3px
}