有样式的tips

@charset "utf-8";
/* CSS Document */
/* ljtips 1.0 */
/* lujun idche@qq.com*/
/* 2010-10-8*/
.lj-tipsWrap,.lj-in,.lj-close {
	display: inline-block;
	color: #fff
}

.lj-tipsWrap {
	background: #000;
	filter:alpha(opacity=60);-moz-opacity:0.6; -khtml-opacity:0.6;
	opacity : 0.6;
	line-height: 1.6em;
	padding: 10px 15px;
	position: absolute;
	text-align: left;
	text-align: left;
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

.lj-in {
	position: absolute;
	zoom: 1;
	border: 10px dashed transparent;
	width: 0px;
	height: 0px;
}

.lj-in span {
	zoom: 1;
	width: 0px;
	height: 0px;
	overflow: hidden;
}

.lj-close {
	position: absolute;
	text-decoration: none;
	color: #fff;
	font-size: 14px;
	height: 9px;
	width: 9px;
	overflow: hidden;
	line-height: 0.5em;
	right: 0;
	top: 0;
}

.lj-close:hover {
	color: red;
}

.lj-top {
	border-top: 10px solid #000;
	bottom: -20px;
	left: 3px;
}

.lj-top span {
	border-top: 10px solid #000;
	margin: -11px 0 0 -10px;
}

.lj-right {
	border-right: 10px solid #000;
	left: -20px;
	top: 3px;
}

.lj-right span {
	border-right: 10px solid #000;
	margin: -10px 0 0 -9px;
}

.lj-bottom {
	border-bottom: 10px solid #000;
	top: -20px;
	left: 3px;
}

.lj-bottom span {
	border-bottom: 10px solid #000;
	margin: -9px 0 0 -10px;
}

.lj-left {
	border-left: 10px solid #000;
	right: -21px;
	top: 3px;
}

.lj-left span {
	border-left: 10px solid #000;
	margin: -10px 0 0 -11px;
}

.lj-left  ~ .lj-close {
	left: 0;
}
/*css 3 渐进增强*/
.lj-tipsWrap {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}

必须文件：ljtips.css,
ljtips.js(JS请在页面最后加载，也就是DOM元素载入完成以后)


	
ljtips();
    
参数:String 页面DOM 元素ID

    		element 页面DOm元素对象
    
    
返回值:Object
    	{show,hide}
    
    
    
.show()
    
参数{conteng:String,
    		p:String,
            clear:boolean,
            closeBtn:boolean,
            time:1000
            }
    

    	conteng:提示内容,可以是HTML片段

        p:提示的位置。可选参数[top,bottom.left,right] 默认right

        clear:强制清除他已经存在的提示 默认 false

        boolean:是否有关闭按钮 默认false

        time:提示显示时间，单位毫秒 默认不消失

        

    
    
    
.hide()
    
清除当前对象上的提示，无参数
    
点击我

// JavaScript Document
window.ljtips = function(){
		var html	= "
\">\
						
\
						\">\
						\" class=\"lj-close\">x\
					
";
		var dg		= function(id){return document.getElementById(id);};
		var dt		= function(parent, nodeName){return  parent.getElementsByTagName(nodeName);};
		var db		= document.body;
		var dd		= document.documentElement;
		var of		= 15;// 偏移量
		var prefix	= 'lj';// 前缀
		var w		= window;
		var lock	= true;// 锁定同一对象 多次弹出提示
		return function(id){
			var elem	= id ? typeof id == "string" ? dg(id) : id : this;
			var offset	= null;
			var	width	= elem.offsetWidth;
			var	height	= elem.offsetHeight;
			var rand	= 0;// 随即值
			var func	= null;// 窗口变化绑定的函数
			var	_this	= {};
			var pos		= {
				left	: function(w, h){return {top:offset.top , left:offset.left - w - of}},
				top		: function(w, h){return {top:offset.top - h - of, left:offset.left}},
				right	: function(w, h){return {top:offset.top , left:offset.left + width + of}},
				bottom	: function(w, h){return {top:offset.top + height + of , left:offset.left}}
			};


			_this.show = function(obj){
				if(elem.lock && !obj.clear)return false;
				if(obj.clear)_this.clear(dg(prefix + rand));
				elem.lock=true;
				offset	= elem.getBoundingClientRect();
				var top	= db.scrollTop + dd.scrollTop;
                var left= db.scrollLeft + dd.scrollLeft;
				obj.p = obj.p || 'right';
				var wrap = _this.append(obj.p, obj.closeBtn || false);
				dt(wrap, "DIV")[0].innerHTML = obj.content;
				var p = pos[obj.p](wrap.offsetWidth,wrap.offsetHeight);
				wrap.style.top = p.top + top + "px";
				wrap.style.left = p.left + left + "px";
				obj.time && setTimeout(function(){_this.clear(dg(prefix+rand));}, obj.time);
				obj.fn && obj.fn.call(elem, dg(prefix+rand));
				//--检测窗口发生变化
				func = function(a, b){
					return function(){
						var top	= db.scrollTop + dd.scrollTop;
               			var left= db.scrollLeft + dd.scrollLeft;
						offset = elem.getBoundingClientRect();
						var c = pos[obj.p](wrap.offsetWidth, wrap.offsetHeight);
						b.style.top = c.top + top + 'px';
						b.style.left = c.left + left + 'px';
					}
				}(elem, wrap);
				w.attachEvent ? w.attachEvent('onresize', func) : w.addEventListener('resize', func, false);
			}
			_this.append = function(p,closeBtn){
				var r = rand = Math.floor(Math.random() * 10000);
				var x = document.createElement("DIV");
				x.id = prefix + r;
				x.innerHTML = html.replace("<%=p%>",p).replace(/<%=r%>/g,r);
				document.body.appendChild(x);
				if(closeBtn){
					dg("ljClose"+r).onclick = _this.hide;
				}else{
					dg("ljClose"+r).style.display = "none";
				}
				return dg("tipsWrap-" + r);
			}
			
			_this.clear = function(a){
				a && a.parentNode && a.parentNode.removeChild(a);
			//	try{
				w.attachEvent ? w.detachEvent('onresize',func) : w.removeEventListener('resize', func, false);
			//	}catch(e){}
				elem.lock = false;// 解除锁定
			}
			_this.hide = function(){
				_this.clear(dg(prefix + rand));
			}
			return _this;
		}
	}();