兼容IE,火狐狸的自定义tips，浮动显示文字

兼容IE,火狐的自定义tips，浮动显示文字

大部分代码来自网络，可以在自己的页面定义变量qTipTag名称譬如想遍历全部的TD 就写qTipTag='td';，

我还加了个qTipClassName用于却分是否需要做tips处理，只有定义指定class的tag才做。

//////////////////////////////////////////////////////////////////
// qTip - CSS Tool Tips - by Craig Erskine
// http://qrayg.com | http://solardreamstudios.com
//
// Inspired by code from Travis Beckham
// http://www.squidfingers.com | http://www.podlob.com
//////////////////////////////////////////////////////////////////

var qTipTag = "td"; // Which tag do you want to qTip-ize? Keep it lowercase!//
var qTipX = -30; // This is qTip's X offset//
var qTipY = 25; // This is qTip's Y offset//
var qTipClassName = "needShowPop"; // Which objects' name.
// There's No need to edit anything below this line//
tooltip = {
	name :"qTip",
	offsetX :qTipX,
	offsetY :qTipY,
	tip :null
}
tooltip.init = function() {
	try{
	var tipNameSpaceURI = "http://www.w3.org/1999/xhtml";
	if (!tipContainerID) {
		var tipContainerID = "qTip";
	}
	var tipContainer = document.getElementById(tipContainerID);
	if (!tipContainer) {
		tipContainer = document.createElementNS ? document.createElementNS(
				tipNameSpaceURI, "div") : document.createElement("div");
		tipContainer.setAttribute("id", tipContainerID);
		document.getElementsByTagName("body").item(0).appendChild(tipContainer);
	}
	if (!document.getElementById)
		return;
	this.tip = document.getElementById(this.name);
	if (this.tip)
		document.onmousemove = function(evt) {
			tooltip.move(evt||window.event)
		};
	var a, sTitle;
	var anchors = document.getElementsByTagName(qTipTag); 
	for ( var i = 0; i < anchors.length; i++) {
		a = anchors[i];
		if(a.getAttribute("type") != qTipClassName){
			continue;
		}
		sTitle = a.getAttribute("title");
		if (sTitle) {
			a.setAttribute("tiptitle", sTitle);
			a.removeAttribute("title");
			a.onmouseover = function() {
				tooltip.show(this.getAttribute('tiptitle'))
			};
			a.onmouseout = function() {
				tooltip.hide()
			};
		}
	}
	}catch(e){//alert(e)
		
	}
}
tooltip.move = function(evt) {
	try{
	var x = 0, y = 0;
	if (document.all) {// IE
		x = (document.documentElement && document.documentElement.scrollLeft) ? document.documentElement.scrollLeft
				: document.body.scrollLeft;
		y = (document.documentElement && document.documentElement.scrollTop) ? document.documentElement.scrollTop
				: document.body.scrollTop;
		x += window.event.clientX;
		y += window.event.clientY;

	} else {// Good Browsers
		x = evt.pageX;
		y = evt.pageY;
	}
	var divWidth = document.getElementById("qTip").scrollWidth;
	var divHeight = document.getElementById("qTip").scrollHeight;
	if (x + divWidth > document.body.clientWidth + document.body.scrollLeft + qTipX) {
		x = x - divWidth;
	}
	if (y + divHeight > document.body.clientHeight + document.body.scrollTop - qTipY) {
		y = y - divHeight - qTipY;
	}
	this.tip.style.left = (x + this.offsetX) + "px";
	this.tip.style.top = (y + this.offsetY) + "px";
	}catch(e){//alert(e)
		
	}
}
tooltip.show = function(text) {
	if (!this.tip)
		return;
	this.tip.innerHTML = text;
	this.tip.style.display = "block";
}
tooltip.hide = function() {
	if (!this.tip)
		return;
	this.tip.innerHTML = "";
	this.tip.style.display = "none";
}

朋友的网站 http://woods2010.cn.alibaba.com/ 专业电子器件代购

兼容IE,火狐狸的自定义tips，浮动显示文字

相关推荐