Show help text next to item

rmagan · Nov 10, 2003

I have a table of text items. When a user enters the field, I would like to display some bubble help next to the appropriate text item. When they leave he field, the help must disappear. Any suggestions?

<TD>
<input type="text" name="p_grd_score" size="5" maxlength="5" value="hello">
</TD>
<TD>
<input type="text" name="p_grd_score2" size="5" maxlength="5" value="hello2">
</TD>

dkdude · Nov 10, 2003

rmagan,

What you're looking for it aften called a tool tip. Try this:

[tt]<INPUT TYPE="text" NAME="yourName" TITLE="Enter your name here..." SIZE="30">[/tt]

When the user rolls the mouse pointer over the input box, the tool tip will be displayed.

Works fine in IE -don't know if it's cross browser compatible...!?!

Good Luck §;O)

Jakob

kaht · Nov 10, 2003

I was also directed to this site:

http://www.matunuck.com/jwin/examples.html

All the examples posted on that site are for mouseover and mouseout examples, but I'm sure you could probably apply it to focus and blur methods as well. The tutorials are pretty descriptive and you have a lot of flexibility on how your popups display. Very nice tool.

-kaht

geofftelforduk · Nov 19, 2003

Hi all,

You can also achieve what you are after by the following code:

Code:

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script language=&quot;javascript&quot;>

function DisplayHelp(Params){
		  if (document.getElementById(Params).style.display == &quot;&quot;) {
		    document.getElementById(Params).style.display = &quot;none&quot;;		   
		  } else {
		    document.getElementById(Params).style.display = &quot;&quot;;		    
		  }
}

function RemoveHelp(Params){
		  
		    document.getElementById(Params).style.display = &quot;none&quot;;		    
		  
}

</script>
</HEAD>

<BODY>
<table border=&quot;0&quot;>
	<tr>
		<td>
			<input type=&quot;text&quot; name=&quot;myText1&quot; onFocus=&quot;DisplayHelp('text1')&quot; onBlur=&quot;RemoveHelp('text1')&quot;>
		</td>
		<td>
			<div align=&quot;left&quot; id=&quot;text1&quot; style=&quot;display:none&quot;>Help text 1</div>
		</td>
	<tr>
	<tr>
		<td>
			<input type=&quot;text&quot; name=&quot;myText2&quot; onFocus=&quot;DisplayHelp('text2')&quot; onBlur=&quot;RemoveHelp('text2')&quot;>
		</td>
		<td>
			<div align=&quot;left&quot; id=&quot;text2&quot; style=&quot;display:none&quot;>Help text 2</div>
		</td>
	<tr>
	<tr>
		<td>
			<input type=&quot;text&quot; name=&quot;myText3&quot; onFocus=&quot;DisplayHelp('text3')&quot; onBlur=&quot;RemoveHelp('text3')&quot;>
		</td>
		<td>
			<div align=&quot;left&quot; id=&quot;text3&quot; style=&quot;display:none&quot;>Help text 3</div>
		</td>
	<tr>
</table>
</BODY>
</HTML>

You can make the help text display wherever you want by just placing the

Code:

<div align=&quot;left&quot; id=&quot;text3&quot; style=&quot;display:none&quot;>Help text 3</div>

wherever you want to.

Have fun,

Geoff

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Show help text next to item

rmagan

Programmer

dkdude

Programmer

kaht

Programmer

geofftelforduk

Programmer

Similar threads

Part and Inventory Search

Sponsor