MOPVHS's Blog

本文源自leeiio的文章Sweet Titles for jQuery (美妙的标题提示)

实现步骤：

1.引入jQuery 库

2.jquery.sweetTitles.js的代码如下：

/*
Sweet Titles (c) Creative Commons 2009

http://creativecommons.org/licenses/by-nc-sa/3.0/

Author: Leeiio | http://leeiio.me
*/

/*
Something Special tipElements
Do not include href="#xxx" : a:not([href^='#'])
*/
var sweetTitles = {
	x : 10,								// @Number: x pixel value of current cursor position
	y : 20,								// @Number: y pixel value of current cursor position
	tipElements : "a",	    			// @Array: Allowable elements that can have the toolTip,split with ","
	init : function() {
		$(this.tipElements).mouseover(function(e){
			this.myTitle = this.title;
			this.myHref = this.href;
			this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref);
			this.title = "";
			var tooltip = "


"+this.myTitle+""+this.myHref+""+"


";
			$('body').append(tooltip);
			$('#tooltip')
				.css({
					"opacity":"0.8",
					"top":(e.pageY+20)+"px",
					"left":(e.pageX+10)+"px"
				}).show('fast');
		}).mouseout(function(){
			this.title = this.myTitle;
			$('#tooltip').remove();
		}).mousemove(function(e){
			$('#tooltip')
			.css({
				"top":(e.pageY+20)+"px",
				"left":(e.pageX+10)+"px"
			});
		});
	}
};
$(function(){
	sweetTitles.init();
});

CSS代码：

body div#tooltip { position:absolute;z-index:1000;max-width:220px;width:auto !important;width:220px;background:#000;text-align:left;padding:5px;min-height:1em;}
body div#tooltip p { margin:0;padding:0;color:#fff;font:12px verdana,arial,sans-serif; }
body div#tooltip p em { display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold; }

若要整成圆角的提示，Hack一下即可：

body div.tooltip{-moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;}