//Использование
// <link href="css/help.css" type="text/css" rel="stylesheet"/>
//<span id="hlp1" class="tipText">Текст подсказки </span>
//<span id="hlp2" class="tipText">Текст подсказки2 </span>
//<script>Help.AddTip('hlp1')</script>
//<script>Help.AddTip('hlp2')</script>

var HelpObject = function() {
	this.NumberOfTips = 0;
	this.Tips = new Array();
}
HelpObject.prototype = {
	SetDisplayState: function(tipID, state) {
		var Tip = $('tip'+tipID);
		if (Tip == null) {
			return this;
		}
		else {
			Tip.style.display = state;
			return this;
		}
	},
	
	AddTip: function(sid) {
		var isOK = true;
		var ThisTip = "";
		var ThisTipNumber = 0;
		var element = $(sid);
		
		if (element == null) {
			isOK = false;
		}
		if (isOK) {
			ThisTipNumber = ++this.NumberOfTips;
			this.Tips[ThisTipNumber] = ThisTip = element.innerHTML;
			document.write('<img src="/js/help.gif" width="15" height="15" alt="Показать подсказку" align="middle" onClick="Help.ShowTip('+ThisTipNumber+', event)"/><div id="tip'+ThisTipNumber+'" class="tip" style="top:0px; left:0px;">'+ThisTip+'<p align="right"><a href="javascript:Help.HideTip('+ThisTipNumber+')">Закрыть</a></p></div>');
			this.SetDisplayState(ThisTipNumber, 'none');
		}
		return this;
	},
	
	SetPosition: function(tipID, e) {
		var Tip = $('tip'+tipID);
		if (Tip == null) {
			return this;
		}
		else {
			var eX=XY(e, "X"), eY=XY(e,"Y");
			var sX = scrollXY("X"), sY = scrollXY("Y");
			if ((getClientWidth() - (eX - sX)) < 200) eX = eX - 200;
			if ((getClientHeight() - (eY - sY)) > Tip.clientHeight) eY = eY - Tip.clientHeight;
			Tip.style.top=eY+'px';
			Tip.style.left=eX+'px';
			return this;
		}
	},
	
	ShowTip: function(tipID, e) {
		this.SetDisplayState(tipID, 'block');
		this.SetPosition(tipID,e);
	},
	
	HideTip: function(tipID) {
		this.SetDisplayState(tipID, 'none');
	}
}
var Help = new HelpObject();