Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2011-10-17
7
Medium Priority
?
876 Views
Last Modified: 2012-05-12
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?
0
Comment
Question by:rmmarsh
  • 3
  • 3
7 Comments
 
LVL 13

Expert Comment

by:haloexpertsexchange
ID: 36982396
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
 
LVL 39

Expert Comment

by:BillDL
ID: 36982412
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
 

Author Comment

by:rmmarsh
ID: 36982422
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 39

Accepted Solution

by:
BillDL earned 2000 total points
ID: 36989028
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
 

Author Closing Comment

by:rmmarsh
ID: 36989112
That's perfect, Bill... thank you so much!
0
 
LVL 39

Expert Comment

by:BillDL
ID: 36991068
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

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Find out what you should include to make the best professional email signature for your organization.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question