I want to display a small question mark that will display a definition

I'm sure you've seen those site where there is a small icon of a question mark that when you click it, it pops open a small window and displays a definition or some other verbiage.  It has a "close" text link which closes the window.

How do I do this?
rmmarshAsked:
Who is Participating?
 
BillDLCommented:
Hi

Sorry, but I can't see any of the question marks with popup help in the link you gave.   obviously would need to have an account to get further.

I don't have a lot of time right at the moment, but can post some other examples later.  In the meantime tell me what you think of the attached HTML file.  It just modifies a hyperlink so that when hovered over it displays text in a box until you move the mouse away from the linked item.

It uses no JavaScript and all code is as inline CSS in the <style></style> tags which I have commented.  The idea is that the text inside the <span></span> tags is deliberately hidden until the link is hovered over, and then displays as dictated by the style code.

You will need the GIF image in the same folder as the HTML file.
 . CSS-Tooltip.html

If you really do prefer a clickable link, then I will get some examples that (probably) use JavaScript.

Bill
0
 
haloexpertsexchangeCommented:
simple version is something like this
function openhelp()
	{
		window.open("help.html","help","width=250,height=150,location=0,scrollbars=0, toolbar=0");
	}<--the javascript function
 <img onclick="openhelp();" src="question.gif" >

Open in new window

the help.html would have whatever you wanted displayed already in it.
0
 
BillDLCommented:
Are you referring to a popup window that shows as an "overlay" window, ie. where you can see the content of the page underneath it either darkened or lightened, but can't really read the contents?  Usually in that type of window you have a "close" text link and also an "X" icon to close it.

Or are you talking about one of those sections that appears as a heading along with others, and when you click a "more" or other link it expands out to show the content with a "collapse" link or icon?

Or are you talking about a kind of "tool-tip" popup that shows above or alongside the ? icon or text link, and usually shows the help content in a shaded box that is often a light shade of yellow?

There are quite a few different ways of creating any of these, and to save providing extraneous information it would help to know what appearance you want.  Perhaps a screenshot of a page displaying the type of effect you want would be a good idea.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
rmmarshAuthor Commented:
Or are you talking about a kind of "tool-tip" popup that shows above or alongside the ? icon or text link, and usually shows the help content in a shaded box that is often a light shade of yellow?

That would work for starters...  I'll look for an example and post it...
0
 
rmmarshAuthor Commented:
0
 
rmmarshAuthor Commented:
That's perfect, Bill... thank you so much!
0
 
BillDLCommented:
Thank you rmmarsh.

The example (used with a small question mark image instead of a text "?" or the larger GIF in the example) shouldn't be too obtrusive and pop up at unwanted times.  I personally hate those advertising links you get in pages where they pop up in a box when your cursor travels over them en route to click something else, but placed carefully a small GIF image of a ? shouldn't be moused over accidentally as is the case with the advertising text links in the middle of the text area.

If you would like to experiment with different methods, then there are loads of different ways that popups can be achieved.

The vast majority will use JavaScript, but when searching the Internet you will get a lot of hits for popup WINDOWS or images.

The first comment in this question suggested using a separate HTML file containing the help text.  You can control how a window opens using JavaScript, and can force it to open at a certain size without the address bar or toolbar, but it is strill a window and people like me who don't like scripts controlling how my browser window opens will usually apply browser settings to prevent this.  It is also possible to open a popup browser window and send specific text to display in it, but the same restrictions make it impossible to determine if this will work on someone else's computer.  Example popup window:
 
<html>
<head>

<script type="text/javascript">
function open_win()
{
window.open("http://www.w3schools.com","_blank","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=yes, width=400, height=400");
}
</script>

</head>

<body>
<p>Link to page of Javascript Browser Functions.</p>
<p>Button opens new window to target URL and JavaScript parameters control how it displays.  However, it will not work if your browser settings prevent this type of scripted control.</p>
<form>
<input type="button" value="Open Window" onclick="open_win()">
</form>

</body>
</html>

Open in new window

You can obviously create a standard button with a ? where you wish, and have that open a JavaScript MESSAGE (alert(), confirm(), and prompt() methods) - http://www.w3schools.com/js/js_popup.asp, but with all the malware and security issues prevailing it is hard to justify using a button that the person has to first click before knowing what is going to happen, and none of the methods are really suitable as a "help" message.  Try it and you'll see:
 
<html>
<head>

<script type="text/javascript">
function show_alert1()
{
alert("an-tee-dis-uh-stab-lish-muhn-tair-ee-uh-niz-uhm" + '\n' + "noun: opposition to the withdrawal of state support" + '\n' + "or recognition from an established church," + '\n' + "especially the Anglican Church in 19th-century England.");
}
</script>

</head>
<body>

<p>Noun: antidisestablishmentarianism&nbsp;&nbsp;<input type="button" onclick="show_alert1()" value="Definition" />
</p>

</body>
</html>

Open in new window


This really leaves us with a "Tool-Tip" as a logical choice.  Generally a tooltip is referred to as one that pops up on mouseover rather than only working when clicked.  There are loads of resources is you search for "javascript tooltip" or "css tooltip", but if you want to find ones that work onClick then search for something like "javascript tooltip click link" or "css tooltip click link".

I found a great page that uses image fragments to create speech bubble type tooltips, and on that page there are a couple that stay open until an "x" is clicked.
http://mckay.cshl.edu/balloons.html
http://gmod.org/wiki/Popup_Balloons
The methods require the *.JS files and images:
http://mckay.cshl.edu/downloads/balloons.zip

All you really need from the Zip file are folders named "images" and "js".  The "images" sub-folder just needs two sub-folders (GBubble and GPlain) with 7 and 6 PNG images respectively in each, and the "js" folder just needs 4 *.js files.  You can delete all the other sub-folders.

Here is another CSS styled Tooltip method similar to the example I gave, but with a more refined presentation:
http://www.pat-burt.com/web-development/how-to-do-easy-tooltip-popups/
http://www.pat-burt.com/wp-content/csstooltip.html

You pay a very modest fee (eg. $3) to get the code and instructions for (probably all of the) very attractive jQuery ToolTips shown here:
http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

You may like the results and copious explanations offered here for jQuery/Ajax tooltips:
http://www.nickstakenburg.com/projects/prototip2/

I hope this helps.

Bill
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.