Jump to content

Tool–tip Help

Recommended Posts

I recently started working on making my own tool-tip script. It's gone well so far, but there are a few things that I need assistance with:

<script type="text/javascript" language="Javascript"><!--//Attempting to create a tool tip... I wonder how this will go?//Thanks to astupidname @ W3Schools forum for the help on getting this thing to work.var toolTip = function(displayType, innerText)	{	var ttText = ["...", "It worked!", "EMPTY", "EMPTY", "EMPTY"];	document.getElementById('toolTipContain').style.display = displayType;	if (innerText)		{		document.getElementById('toolTipText').innerHTML = ttText[innerText];		}	}//--></script></head><body><div align="center"><div id="toolTipContain" onmouseover="toolTip('block');" onmouseout="toolTip2('none');">	<div class="toolTip" onmouseover="toolTip('block');" onmouseout="toolTip2('none');">		<div id="toolTipText">		</div>	</div></div><span onmouseover="toolTip('block', 1);" onmouseout="toolTip('none', 0);">TEST</span>

1): this is tricky to explain. The way I've coded it, when you mouse over the element, it tells the script how to display #toolTipContain, and what variable to put into #toolTipText. Unfortunately, it's not including the variables -- rather, it's outputting a001 or a000, which are the variables' names. I've tried numerous variations, and now I'm just plain lost as to the solution. This has been resolved.2): is there any way to detect the edges of an element? I'm hoping there's some way to find the last vertical and horizontal pixel of an element (like the <p> tag which triggers the tool-tip, for instance), so I don't have to use onmousemove for positioning the divs.Before you say it, I know there are probably plenty of free-for-use tool-tip scripts out there. I'm attempting to make one because I'd like to test myself, but apparently I need a bit of guidance.Thank you for your time.

Link to post
Share on other sites
toolTip = function(displayType, innerText) { var a000 = "..."; var a001 = "It worked!"; document.getElementById('toolTipContain').style.display=displayType; document.getElementById('toolTipText').innerHTML=innerText; }toolTip2 = function(displayType) { document.getElementById('toolTipContain').style.display=displayType; }<span onmouseover="toolTip('block', 'a001');" onmouseout="toolTip('none', 'a000');">TEST</span>
First thing, you can not quote variable names when you attempt to access them in a function call: ( 'a001' ) -is a string of text. ( a001 ) would refer to the variable.The variables, a000 and a001 are private variables declared inside the function and cannot be accessed from the page, unless you move them outside of the function so they are global variables:
var a000 = "...";var a001 = "It worked!";var toolTip = function(displayType, innerText)	{	document. blah blah blah... rest of code....//also note when using: somename = function() it is the same as declaring: function somename() <---this is shorthand version//but should be declared with a var statement as best practice, as a function name actually is a variable within the global namespace<span onmouseover="toolTip('block', a001);" onmouseout="toolTip('none', a000);">TEST</span>

This (using extra global variables outside of the function) is undesirable and bad practice, to be avoided, as it unnecessarily pollutes the 'global namespace'. Would be better to insert the messages in an array inside the function, then you can pass the index number of the array item from the function call:

var toolTip = function(displayType, innerText)	{	var messages = ["...", "It worked!", "Some more text"];	document.getElementById('toolTipContain').style.display = displayType;	document.getElementById('toolTipText').innerHTML = messages[innerText];	}<span onmouseover="toolTip('block', 1);" onmouseout="toolTip('none', 0);">TEST</span>

Now, also, you don't need two functions to handle the displayType parameter, as you don't have to make the innerText parameter required:

	function tooltip(displayType, innerText)	{	var messages = ["...", "It worked!", "Some more text"];	document.getElementById('toolTipContain').style.display = displayType;	if (innerText) {		document.getElementById('toolTipText').innerHTML = messages[innerText];	}	}

Now you can call tooltip function with or without using the innerText parameter, and no longer need your tooltip2 function.Well that should get you going on that part of it, all the time I have for now.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...