tooltip（title美化）教程——jquery的特效

Youngxj

发布于 2018-06-06 13:59:35

5.2K0

发布于 2018-06-06 13:59:35

文章被收录于专栏：YoungxjYoungxj

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

首先复制下面代码到网站底部：

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即可，样式自己修改即可，如下：

.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:#6F8EC5}.tipsy-inner{background-color:#6F8EC5;color:#FFF;max-width:200px;padding:5px 8px 4px 8px;text-align:center;border-radius:3px}

我这里用的蓝叶大佬的css，他的样式清新简洁。

这个功能需要引入jquery才能实现。