Onmouseover="showTooltip help ; )

[dawidpakson]

Hello. In short, more or less write what I mean;] .. and so I have a scrypt which consists onmouseover = "showTooltip (event, 'TEXT'); return false" onmouseout = "hideTooltip ()".. So I have to scrypt him but ne know if all this is sufficient ...

Scrypts:
basic.js

function showTooltip(event, text)
{
	var content = document.getElementById('tooltip_content');
	if(content)
		content.innerHTML = text;

	var obj = document.getElementById('tooltip');
	if(obj)
	{
		var st = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
		if(navigator.userAgent.toLowerCase().indexOf('safari') >= 0)
			st = 0;

		obj.style.left = Math.max(0, event.clientX) + 'px';
		obj.style.top = event.clientY + st + 10 + 'px';
		obj.style.display = 'block';
	}
}

function hideTooltip()
{
	var obj = document.getElementById('tooltip');
	if(obj)
	{
		obj.style.display = 'none';
		obj.style.left = '0px';
		obj.style.top = '0px';
	}

	var content = document.getElementById('tooltip_content');
	if(content)
		content.innerHTML = '';
}

function show_hide(flip, button, onText, offText)
{
	var tmp = document.getElementById(flip);
	if(tmp)
	{
		tmp.style.display = tmp.style.display == 'none' ? '' : 'none';
		if(button)
		{
			if(button.firstChild)
			{
				button.firstChild.nodeValue = tmp.style.display == 'none' ? onText : offText;
				if(button.style.color)
					button.style.color = tmp.style.display == 'none' ? 'lime' : 'red';
			}
			elseif(button.innerHTML)
			{
				button.innerHTML = tmp.style.display == 'none' ? onText : offText;
				if(button.style.color)
					button.style.color = tmp.style.display == 'none' ? 'lime' : 'red';
			}
		}
	}
}

function MouseOverBigButton(source)
{
	if(source.firstChild.style)
		source.firstChild.style.visibility = "visible";
	else
		source.childNodes[1].style.visibility = "visible";
}

function MouseOutBigButton(source)
{
	if(source.firstChild.style)
		source.firstChild.style.visibility = "hidden";
	else
		source.childNodes[1].style.visibility = "hidden";
}

function BigButtonAction(path)
{
	window.location = path;
}

function ToggleMaskedText(a_TextFieldID)
{
	m_DisplayedText = document.getElementById('Display' + a_TextFieldID).innerHTML;
	m_MaskedText = document.getElementById('Masked' + a_TextFieldID).innerHTML;

	m_ReadableText = document.getElementById('Readable' + a_TextFieldID).innerHTML;
	if(m_DisplayedText == m_MaskedText)
	{
		document.getElementById('Display' + a_TextFieldID).innerHTML = document.getElementById('Readable' + a_TextFieldID).innerHTML;
		document.getElementById('Button' + a_TextFieldID).src = './images/hide.gif';
	}
	else
	{
		document.getElementById('Display' + a_TextFieldID).innerHTML = document.getElementById('Masked' + a_TextFieldID).innerHTML;
		document.getElementById('Button' + a_TextFieldID).src = './images/show.gif';
	}
}

sitePath = 'http://localhost/images/';
sflakesMax = 64;
sflakesMaxActive = 64;
svMaxX = 2;
svMaxY = 3;
ssnowStick = 1;
sfollowMouse = 0;

style.css

#tooltip
{
	position: absolute;
	color: #fff;
	display: none;
	z-index: 1000;
}

	.tip-title
	{
		text-transform: uppercase;
		text-align: center;
		font-weight: bold;
		font-size: 12px;
	}

		.tip-title .neck
		{
			color: #ffff00;
		}

		.tip-title .container
		{
			color: #3399ff;
		}

		.tip-title .head, .tip-title .chest, .tip-title .legs, .tip-title .feet
		{
			color: #9900ff;
		}

		.tip-title .right, .tip-title .left
		{
			color: #cc0000;
		}

		.tip-title .finger
		{
			color: #ffff00;
		}

		.tip-title .ammunition
		{
			color: #ff6600;
		}

	.tip-description
	{
		color: #00cc00;
	}

.quote
{
	border: 1px solid #505050;
	background-color: #92b2dd;
	padding: 8px;
	color: black;
	margin: 0px 20px 0px 20px;
}

<li><a href="?subtopic=downloads"onmouseover="showTooltip(event, 'Our client and all additional stuff you may ever need.'); return false" onmouseout="hideTooltip()">Download</a></li>

To call these images png:

<div id="tooltip">
		<table cellpadding="0" cellspacing="0" border="0">
	    		<tr>
				<td style="background: url(images/tooltip/ttip-tl.png); width: 7px; height: 7px;"></td>
				<td style="background: url(images/tooltip/ttip-t.png); height: 7px;"></td>
				<td style="background: url(images/tooltip/ttip-tr.png); width: 7px; height: 7px;"></td>
			</tr>
			<tr>
				<td style="background: url(images/tooltip/ttip-l.png); width: 7px;"></td>
				<td style="background: url(images/tooltip/ttip-bg.png); padding: 10px;">
					<span id="tooltip_content">JavaScript</span>
				</td>
				<td style="background: url(images/tooltip/ttip-r.png); width: 7px;"></td>
			</tr>
			<tr>
				<td style="background: url(images/tooltip/ttip-bl.png); width: 7px; height: 7px;"></td>
				<td style="background: url(images/tooltip/ttip-b.png); height: 7px;"></td>
				<td style="background: url(images/tooltip/ttip-br.png); width: 7px; height: 7px;"></td>
			</tr>
		</table>
	</div>

Ss'

That's all. Is there anyone to help make this scrypt work? Thank you very much for helping.

 

[Zonet]

Why do you use elfs tooltip? <_<

 

[dawidpakson]

In this problem that do not use, and only gave the example and whether it is someone able to help ; ]