Jump to content

Tool–tip Help

BlueDigit

By BlueDigit
in JavaScript

Recommended Posts

BlueDigit Newbie

BlueDigit

Posted
Posted

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 comment
Share on other sites
tooldude Newbie

tooldude

Posted
Posted
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 comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...