Tooltip Flyover Help

Tooltip flyovers used judiciously can provide help at the very moment it's needed on your website.

Supplementary information can be provided for images, form field labels, or certain blocks of text, as examples.

Any HTML container (such as div, span, p, and img tags) can reveal a flyover with information when the site visitor's cursor hovers over it. Containers are provided with an onmouseover attribute that causes the flyover to display.

In the mouseover attribute, you specify where the flyover shall appear in relation to the container. You also specify the information to be presented in the flyover.

The information can be professionally and elegantly presented.

This example has flyovers for an image (img container), form labels (span containers), a form button (input container), and text content in a div container.

Image, form labels, form button, and div content all have tool tips.

[div content goes here]

Implementing the tooltip flyover help system requires 3 steps:

Create the flyover box within which the help information will be presented and put it into the web page.
Paste the JavaScript into the web page.
Insert the mouseover attribute into the container tag to display the flyover. (There may be more than one such container on the web page.)

Tooltip Flyover Div

Here is the source code of the flyover box div as used in the example, above. Only one of these is required per web page with tooltip flyovers, regardless how many flyover boxes the page has.

The flyover box div must have an id attribute and the value must be unique on the web page.

You may design the flyover box as you please. For example, you may wish to add a style width definition or change the colors.

Only two style definitions are required, the display:none and the position:absolute definitions.

The display:none definition causes the flyover to be undisplayed, invisible, until the JavaScript (below) causes it to display. The position:absolute definition allows the JavaScript to position the flyover anywhere on the web page.

Put the flyover box div in the body area of your web page source code somewhere above the first spot where the flyover will be used.

Tooltip Flyover JavaScript

Here is the source code of the tooltip flyover JavaScript.

<script type = "text/javascript">
// Tip Box Display, version 1.0
// Bontrager Connection, LLC
// http://www.willmaster.com/
// -> Functions findPosX and findPosY by 
//    Peter-Paul Koch & Alex Tingle at 
//    http://www.quirksmode.org/js/findpos.html and 
//    http://blog.firetree.net/2005/07/04/javascript-find-position/
//
// One customization:
//
// Specify the ID of the DIV or other container that is the tip box.

var TipBoxID = "TipBox";

// No other customizations required
// // // // // // // // // // // //

var tip_box_id;

function findPosX(obj)
{
   var curleft = 0;
   if(obj.offsetParent)
   while(1) 
   {
      curleft += obj.offsetLeft;
      if(!obj.offsetParent)
         break;
      obj = obj.offsetParent;
   }
   else if(obj.x)
      curleft += obj.x;
   return curleft;
}

function findPosY(obj)
{
   var curtop = 0;
   if(obj.offsetParent)
   while(1)
   {
      curtop += obj.offsetTop;
      if(!obj.offsetParent)
         break;
      obj = obj.offsetParent;
   }
   else if(obj.y)
      curtop += obj.y;
   return curtop;
}

function DisplayTip(me,offX,offY,content) {
   var tipO = me;
   tip_box_id = document.getElementById(TipBoxID);
   var x = findPosX(me);
   var y = findPosY(me);
   tip_box_id.style.left = String(parseInt(x + offX) + 'px');
   tip_box_id.style.top = String(parseInt(y + offY) + 'px');
   tip_box_id.innerHTML = content;
   tip_box_id.style.display = "block";
   tipO.onmouseout = HideTip;
} // function DisplayTip()

function HideTip() { tip_box_id.style.display = "none"; }
</script>

At line 14 of the JavaScript is a place to specify the id value of the flyover box div. Change it if appropriate.

No other changes to the JavaScript are necessary.

Put the JavaScript in the body area of your web page source code somewhere above the first spot where the flyover will be used. It may be above or below the flyover box div.

Tooltip Flyover onmouseover Attribute

Here is an example HTML tag container with the onmouseover attribute. It is verbatim from the example, above.

Let's talk about the onmouseover attribute value: DisplayTip(this,25,-50,'Double check!')

The DisplayTip() function is the JavaScript function that displays the tooltip flyover box. It also causes the flyover to undisplay when the mouse moves off the container.

The DisplayTip() function parameters tell the function the identity of the container, the x and y positions for the flyover box, and the information to put into the flyover box.

The identity of the container: The identify of the container is specified with the word this (no quotes).
The x position for the flyover box: Specify the number of pixels horizontally that the left edge of the flyover box shall be in relation to the left edge of the container with the onmouseover attribute.
- The digit 0 means the left edge shall be the same as the container's.
- A positive number means the left edge of the flyover box shall be that number of pixels right of the container's left edge.
- A negative number means the left edge of the flyover box shall be that number of pixels left of the container's left edge.
The y position for the flyover box: Specify the number of pixels vertically that the top edge of the flyover box shall be in relation to the top edge of the container with the onmouseover attribute.
- The digit 0 means the top edge shall be the same as the container's.
- A positive number means the top edge of the flyover box shall be that number of pixels below the container's top edge.
- A negative number means the top edge of the flyover box shall be that number of pixels above the container's top edge.
The information to put into the flyover box: Here, between single-quote characters (apostrophes), type the information that will appear in the flyover box. Any text or image may be used so long as these two rules are followed:
1. The information may contain no quotation marks (double quotes).
2. If the information contains single-quote characters (apostrophes), they must be escaped with a preceding backslash. Example: DisplayTip(this,0,0,'Will\'s Text')

Something to consider when specifying the location of the flyover box: When the flyover box is over the top of the container with the onmouseover attribute, the flyover box will flip, rapidly displaying and undisplaying. This happens when the mouse is in the location within the container where the flyover box is displayed.

When the flyover box displays, the mouse is seen as being over the flyover box, not the container, and the JavaScript says to itself, "Ah, ha, the mouse moved off the container." Then, as soon as the flyover undisplays, the mouse is over the container again and the JavaScript says to itself, "Oops!" and displays the flyover box. The mouse is then again over the flyover box and the whole thing repeats.

The solution is to display the flyover box somewhere just off the container with the onmouseover attribute.

Once the flyover box is positioned, it will stay positioned relative to the container, even if the container is moved elsewhere on the web page.

Tooltip Flyover Example Source Code

If you would like to put the entire example on one of your web pages, here is the source code for the whole.

<div style="border-top-style:solid; border-top-width:2px; border-top-color:#72B0E6; padding-top:1px;
         border-left-style:solid; border-left-width:2px; border-left-color:#72B0E6; padding-left:1px;">
<div style="border-top-style:solid; border-top-width:1px; border-top-color:#72B0E6; padding-top:10px;
         border-left-style:solid; border-left-width:1px; border-left-color:#72B0E6; padding-left:10px;">

<script type = "text/javascript">
// Tip Box Display, version 1.0
// Bontrager Connection, LLC
// http://www.willmaster.com/
// -> Functions findPosX and findPosY by 
//    Peter-Paul Koch & Alex Tingle at 
//    http://www.quirksmode.org/js/findpos.html and 
//    http://blog.firetree.net/2005/07/04/javascript-find-position/
//
// One customization:
//
// Specify the ID of the DIV or other container that is the tip box.

var TipBoxID = "TipBox";

// No other customizations required
// // // // // // // // // // // //

var tip_box_id;

function findPosX(obj)
{
   var curleft = 0;
   if(obj.offsetParent)
   while(1) 
   {
      curleft += obj.offsetLeft;
      if(!obj.offsetParent)
         break;
      obj = obj.offsetParent;
   }
   else if(obj.x)
      curleft += obj.x;
   return curleft;
}

function findPosY(obj)
{
   var curtop = 0;
   if(obj.offsetParent)
   while(1)
   {
      curtop += obj.offsetTop;
      if(!obj.offsetParent)
         break;
      obj = obj.offsetParent;
   }
   else if(obj.y)
      curtop += obj.y;
   return curtop;
}

function DisplayTip(me,offX,offY,content) {
   var tipO = me;
   tip_box_id = document.getElementById(TipBoxID);
   var x = findPosX(me);
   var y = findPosY(me);
   tip_box_id.style.left = String(parseInt(x + offX) + 'px');
   tip_box_id.style.top = String(parseInt(y + offY) + 'px');
   tip_box_id.innerHTML = content;
   tip_box_id.style.display = "block";
   tipO.onmouseout = HideTip;
} // function DisplayTip()

function HideTip() { tip_box_id.style.display = "none"; }
</script>

<div 
   id="TipBox" 
   style="
      display:none;
      position:absolute; 
      font-size:12px;
      font-weight:bold;
      font-family:verdana;
      border:#72B0E6 solid 1px;
      padding:15px;
      color:#1A80DB;
      background-color:#FFFFFF;">
</div>

<p style="margin-top:0;">
Image, form labels, form button, and div content all have tool tips.
</p>

<img onmouseover="DisplayTip(this,55,0,'Willmaster.com logo image.')" src="http://www.willmaster.com/08images/wmlogo_icon.gif" width="50" height="50" border="0" alt="image :)">

<form>
<p>
<span onmouseover="DisplayTip(this,25,-50,'Your full name, please.')">Name:</span> 
<input type="text" size="22">
</p>
<p>
<span onmouseover="DisplayTip(this,25,-50,'Double check!')">Email:</span> 
<input type="text" size="22">
</p>
<p>
<input type="button" onmouseover="DisplayTip(this,0,30,'Please verify your information.')" value="Click" onclick="alert('E X A M P L E')"> 
</p>
</form>

<div style="border-style:dotted;border-color:black;border-width:1px;" onmouseover="DisplayTip(this,-65,-85,'<img src=\'http://www.willmaster.com/08images/wmlogo_icon.gif\' width=\'50\' height=\'50\' border=\'0\'>')">[div content goes here]</div>

<div style="height:10px;font-size:1px;line-height:1px;"> </div>

</div><!-- example inside border -->
</div><!-- example outside border -->

When used judiciously, tooltip flyover help can be a professional and elegant method of delivering information at the moment it is needed.

Question: Did you find this article interesting and understandable? How can it be improved? Your response is anonymous. When done typing, click anywhere outside the box. [more info]

Please note: Articles on this website are presented "as is". However -

If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.

WillMaster > Web Development Tools Reference Library > JavaScript Code, Tips

Finding something useful?

Subscribe to
the Possibilities Ezine

Most Recent
Software Additions

Go Short URL

Secure View and Remove

Survey Lite

Attention Ticker

Tooltip Flyover Help

Tooltip Flyover Div

Tooltip Flyover JavaScript

Tooltip Flyover onmouseover Attribute

Tooltip Flyover Example Source Code

WillMaster > Web Development Tools Reference Library > JavaScript Code, Tips

Finding something useful?

Subscribe tothe Possibilities Ezine

Most RecentSoftware Additions

Go Short URL

Secure View and Remove

Survey Lite

Attention Ticker

Tooltip Flyover Help

Tooltip Flyover Div

Tooltip Flyover JavaScript

Tooltip Flyover onmouseover Attribute

Tooltip Flyover Example Source Code

Subscribe to
the Possibilities Ezine

Most Recent
Software Additions