Help Tips with Tap or Mouseover

Informative help tips can provide clarification at the very moment it's needed for users of your form. And at other places on your website.

Opportune information at a timing convenient to the site visitor can be provided for images, form fields, or blocks of text, as examples. Generally, the information relates to the type of information the form field expects, but could be pretty much anything.

Any of these functionalities may be used to provide on-demand help tips, singly or in combination:

1. Tap or click an image or text for the help tip.

2. Mouse over an image or text for the help tip — unavailable on mobile devices because they don't have a mouse for onmouseover attribute functionality.

3. Move the mouse pointer off the image or text to undisplay the help tip — unavailable on mobile devices because they don't have a mouse for onmouseout attribute functionality.

4. Tab, tap, or click into a form field so it gains focus and the help tip is displayed.

When multiple help tips are available, displaying a different help tip will undisplay any other help tip.

Here's an example coded for demonstrating each of the functionalities.

In the example, a help tip is available in 5 places:

1. The Willmaster.com logo (click or tap only).

2. The "Your name" form field label (tap or mouse over). (Mouse out removes the help tip.)

3. The "Your name" form input field (field focus only).

4. The "Your email address" form field label (tap or mouse over). (Mouse out removes the help tip.)

5. The "Your email address" input form field (field focus only).

Nothing in the code for the four functionalities restricts the visual design.

In fact, the easiest approach is likely to be this: Design your form and help tips the way you want them to look. After the design, decide which of the functionalities you wish to use and implement them.

Here is the code existing before the help tip functionality was incorporated.

<div style="float:left;">
<img 
   src="//www.willmaster.com/08images/wmlogo_icon.gif" style="width:50px; height:50px; border:none; outline:none;" 
   alt="image :)">
</div>
<div id="logo-help-tip" style="display:block; float:left; padding-left:1em; padding-top:16px;">
Clicking or tapping an image can reveal a help tip for your visitors
</div>
<div style="clear:left;"></div>

<form>

<p style="margin-bottom:0; display:table;">
Your name.
</p>
<p id="name-help-tip" style="display:block; border:1px dotted blue; margin:0 0 .25em 0; padding:.25em 0 .25em .5em;">
Type your name here, the name to be used in emails sent to you.
</p>
<input 
   type="text" 
   name="your_name" 
   style="width:100%;">

<p style="margin-bottom:0; display:table;">
Your email address.
</p>
<p id="email-help-tip" style="display:block; border:1px dotted blue; margin:0 0 .25em 0; padding:.25em 0 .25em .5em;">
Provide your <b>best</b> email address (for more reliable delivery).
</p>
<input 
   type="text" 
   name="your_email_address" 
   style="width:100%;">

<p>
<input type="button" style="width:100%;" value="Send Subscription" onclick="javascript:alert('Not a live form')">
</p>

</form>

Without the help tip functionality, it looked like this (with CSS style display:block; for making the help tips visible to assist with design).

Clicking or tapping an image can reveal a help tip for your visitors

Your name.

Type your name here, the name to be used in emails sent to you.

Your email address.

Provide your best email address (for more reliable delivery).

Here is the code for the actual above example with the help tip functionality incorporated. Comments follow.

<div style="float:left;">
<img 
   onclick="OpenHelpTip('logo-help-tip')" 
   src="//www.willmaster.com/08images/wmlogo_icon.gif" style="width:50px; height:50px; border:none; outline:none;" 
   alt="image :)">
</div>
<div id="logo-help-tip" style="display:none; float:left; padding-left:1em; padding-top:16px;">
Clicking or tapping an image can reveal a help tip for your visitors
</div>
<div style="clear:left;"></div>

<form>

<p 
   onmouseover="OpenHelpTip('name-help-tip')" 
   onmouseout="CloseHelpTips()" 
   onclick="OpenHelpTip('name-help-tip')" 
   style="margin-bottom:0; display:table;">
Your name.
</p>
<p id="name-help-tip" style="display:none; border:1px dotted blue; margin:0 0 .25em 0; padding:.25em 0 .25em .5em;">
Type your name here, the name to be used in emails sent to you.
</p>
<input 
   onfocus="OpenHelpTip('name-help-tip')" 
   type="text" 
   name="your_name" 
   style="width:100%;">

<p 
   onmouseover="OpenHelpTip('email-help-tip')" 
   onmouseout="CloseHelpTips()" 
   onclick="OpenHelpTip('email-help-tip')" 
   style="margin-bottom:0; display:table;">
Your email address.
</p>
<p id="email-help-tip" style="display:none; border:1px dotted blue; margin:0 0 .25em 0; padding:.25em 0 .25em .5em;">
Provide your <b>best</b> email address (for more reliable delivery).
</p>
<input 
   onfocus="OpenHelpTip('email-help-tip')" 
   type="text" 
   name="your_email_address" 
   style="width:100%;">

<p>
<input type="button" style="width:100%;" value="Send Subscription" onclick="javascript:alert('Not a live form')">
</p>

</form>

<script type="text/javascript">
function CloseHelpTips()
{
   // List the id values of all help tips, quoted and comma-separated.
   var ListOfHelpTipIds = Array( "logo-help-tip", "name-help-tip", "email-help-tip" );
   for( var i=0; i<ListOfHelpTipIds.length; i++ )
   {
      document.getElementById(ListOfHelpTipIds[i]).style.display = "none";
   }
}

function OpenHelpTip(helptip)
{
   CloseHelpTips();
   document.getElementById(helptip).style.display = "block";
}
</script>

The first thing that was done when the design was completed and before the help tip functionality was incorporated is this: In the divs containing a help tip, the CSS style display:block; was changed to display:none; to make all the help tips invisible.

After incorporating the help tip functionality, the help tips are displayed selectively, one at a time.

The source code for the example is color-coded for clarity. Additional comments follow the color-coding comments.

1. There are four different ways to call the JavaScript functions to display or undisplay help tips.

   1. onmouseover to display a help tip when the mouse pointer is over the element.

   2. onmouseout to undisplay a help tip when the mouse pointer is moved off the element.

   3. onclick to display a help tip when the element is clicked.

   4. onfocus to display a help tip when the element gains focus (generally, a form field element).

   They are called numerous times at various places. Those are colored green in the example code.

2. There are two different JavaScript function calls that display or undisplay help tips.

   1. OpenHelpTip
   2. CloseHelpTips

   They are called numerous times at various places. Those are colored red in the example code.

   In the JavaScript below the form, those same function names are also colored red to help with correlation.

3. The block of JavaScript code below the form is colored orange.

4. There are three divs with help tips in the example source code. Each help tip has an id value. The id values are colored blue.

   Where JavaScript function calls need the id value of the relevant help tip, that help tip is also colored blue to help with correlation.

   In the block of JavaScript below the form, one of the JavaScript function's code has a list of the id value of each help tip. All those are also colored blue to help with correlation.

When implementing help tip functionality for your forms, follow these steps:

1. Design the form and help tips.

2. In the divs containing a help tip, change the CSS style display:block; to the CSS style display:none; to make all the help tips invisible.

3. In each div, input, img, or other tag that is to be sensitized for displaying a help tip, do the following:

   1. Decide which one or more methods to use for displaying the help tip. The methods are colored green in the example code. They are onmouseover, onmouseout, onclick, and onfocus.

   2. Implement the help tip by calling the appropriate JavaScript function. The function names are colored red in the example code. They are OpenHelpTip and CloseHelpTips.

      If the onmouseout method is used, call function CloseHelpTips. Otherwise, call function OpenHelpTip with the id value of the help tip to display (colored blue in the example code).

4. Insert the help tip JavaScript code block somewhere below the form (colored orange in the example code). It may be put at the bottom of the page.

5. In the block of JavaScript code, within the function CloseHelpTips, list the id of each help tip div. In the example code, they are colored blue. Notice that each id is between double quotation marks and the id is separated from the next id with a comma.

You have now completed incorporation of help tip functionality into your form.

(This article first appeared in Possibilities ezine.)

Will Bontrager