Home > Basic Functions > Context-sensitive Help > Web Applications > Callouts
Callouts
Instead of opening the entire help system, you can display help information in callouts when a user moves their mouse over certain text, fields, images, etc. Follow the steps below to add a callout to your Web application.
1. Open a page (such as a login form) of your web application using an HTML editor such as Visual Studio or a text editor such as Windows Notepad. This is an example of a simple login form.
|
<html><body>
<br><br>
Username: <input><br>
Password: <input><br><br>
<input type=button value=Login>
</body></html> |
2. Add the following code to display a callout when the mouse is moved over text fields.
Open a Dynamic Help Page
|
<html><body>
<br><br><br><br><br><br><br><br>
<div id=callout style='display:none;position:absolute;height:177px;width:313px;background-image:url(http://www.helpconsole.com/_engine/images/callout.gif)'><iframe style='position:relative;top:29px;left:6px;width:301px;height:109px' scrolling=no frameborder=no src='http://www.helpconsole.com/HelpConsole 2007 Help/project login.aspx'></iframe></div>
Username: <input><br>
Password: <input onmouseover="e=getElementById('callout');e.style.display='';e.style.top=event.clientY-e.clientHeight+document.body.scrollTop-10;e.style.left=event.clientX+document.body.scrollLeft;" onmouseout="getElementById('callout').style.display='none'">
<br><br>
<input type=button value=Login>
</body></html> |
Open a Static Help Page
|
<html><body>
<br><br><br><br><br><br><br><br>
<div id=callout style='display:none;position:absolute;height:177px;width:313px;background-image:url(help/images/callout.gif)'><iframe style='position:relative;top:29px;left:6px;width:301px;height:109px' scrolling=no frameborder=no src='help/project login.htm'></iframe></div>
Username: <input><br>
Password: <input onmouseover="e=getElementById('callout');e.style.display='';e.style.top=event.clientY-e.clientHeight+document.body.scrollTop-10;e.style.left=event.clientX+document.body.scrollLeft;" onmouseout="getElementById('callout').style.display='none'">
<br><br>
<input type=button value=Login>
</body></html> | * the url above assumes that the static help system is in a sub folder named 'help'
3. Open the html file in your browser. Move your mouse over the password field to display the callout window.
See also
|
|
