Inside Technique : Cross-Browser Interactive Tooltips : Step-By-Steps

Creating an interactive tooltip is very easy. Just follow the steps below:

1. Include the script and style sheet on your page. The style sheet defines a tooltip class for setting up a few default parameters for the popup tooltip. For the script to run in Netscape, you must download the latest version of DHTMLLib (updated as of July 21). We include two required parameters (position and visibility) and also set the default background color to white:

   <STYLE>
     .tooltip {position: absolute;visibility: hidden;background:white}
   </STYLE>
   <script SRC="/dhtmllib/dhtmllib2.js">
   // You need to get the DHTMLLib script from
   // http://www.siteexperts.com/dhtmllib/page1.asp
   </script>
   <SCRIPT>
   <!--
   
   // Copyright 1999 InsideDHTML.com, LLC. All rights reserved
   // For more information see www.siteexperts.com
   // This script can be reused as long as this copyright notice is maintained
   
   var iDelay = 750 // Delay to hide in milliseconds
   var iNSWidth=100 // Default width for netscape
   var sDisplayTimer = null, oLastItem
   
   function getRealPos(i,which) {
     iPos = 0
     while (i!=null) {
       iPos += i["offset" + which]
       i = i.offsetParent
     }
     return iPos
   }
   
   function showDetails(sDest,itop,ileft,iWidth) {
     if (document.all!=null) {
       var i = window.event.srcElement
       stopTimer()
       dest = document.all[sDest]
       if ((oLastItem!=null) && (oLastItem!=dest))
         hideItem()
       if (dest) {
         // Netscape Hack
         if (i.offsetWidth==0) 
           if (iWidth)
             i.offsetWidth=iWidth
           else
             i.offsetWidth=iNSWidth;
         if (ileft) 
           dest.style.pixelLeft = ileft
         else
           dest.style.pixelLeft = getRealPos(i,"Left") + i.offsetWidth + 5
         if (itop)
           dest.style.pixelTop = itop
         else
           dest.style.pixelTop = getRealPos(i,"Top")
         dest.style.visibility = "visible"
       }
     oLastItem = dest
     }
   }
   
   function stopTimer() {
     clearTimeout(sDisplayTimer)
   }
   
   function startTimer(el) {
     if (!el.contains(event.toElement)) {
       stopTimer()
       sDisplayTimer = setTimeout("hideItem()",iDelay)
     }
   }
   
   function hideItem() {
     if (oLastItem)
       oLastItem.style.visibility="hidden"
   }
   
   function checkOver() {
     if ((oLastItem) && (oLastItem.contains(event.srcElement)))
       stopTimer()
   }
   
   function checkOut() {
     if (oLastItem==event.srcElement)
       startTimer(event.srcElement)
   }
   
   document.onmouseover = checkOver
   document.onmouseout = checkOut
   //-->
   </SCRIPT>
   
   

   In the script above, we define a variable named iNSWidth. This is used only in Netscape to define the default width for the text related with the tooltip. In Internet Explorer, the real width of the text is exposed using the offsetWidth property. In Netscape this property does not exist and DHTMLLib autoamtically sets this property to 0. Later we show you how to set this value on an individual basis.

2. Create the tooltip.
   Tooltips are created using absolutely positioned elements. We absolutely position DIV elements as they provide the best cross-browser results. When using the DIV you need to assign the following attributes:

   CLASS="tooltip"	Set the default tooltip properties
   STYLE="WIDTH:100px"	Define the width of your tooltip. This can be any valid CSS width
   ONMOUSEOUT="startTimer(event.srcElement)"	Initialize the timer when the mouse exits for hiding the tooltip.
   ID="tooltipname"	All tooltips need a unique name. This id is used to display the tooltip in the next step

   Within this DIV you can put any HTML you want. In our demonstration, we embedded a table element with the same width as the DIV.

   <DIV CLASS=tooltip
     STYLE="width:100"
     ID=popup
     onmouseout="startTimer(event.srcElement)"
     >
     <TABLE BGCOLOR=white BORDER width=100>
       <TR><TD>
         <A HREF="#" 
            ONCLICK="alert('You selected '+ this.innerText);return false">
            Item 1
         </A>
       </TD></TR>
       <TR><TD>
         <A HREF="#" 
            ONCLICK="alert('You selected '+ this.innerText);return false">
            Item 2
         </A>
       </TD></TR>
       <TR><TD>
         <A HREF="#" 
            ONCLICK="alert('You selected '+ this.innerText);return false">
            Item 3
         </A>
       </TD></TR>
       <TR><TD>
         <A HREF="#" 
            ONCLICK="alert('You selected '+ this.innerText);return false">
            Item 4
         </A>
       </TD></TR>
     </TABLE>
   </DIV>
   

   You can create as many tooltips as you need. In the next step, we associate the text with the tooltip.

3. Associate text with a tooltip by using an anchor. As shown below, you must setup the onmouseover and onmouseout events.

   <A HREF="#" 
      ONCLICK="alert('You selected the demonstration');return false" 
      ONMOUSEOVER="showDetails('popup')" 
      ONMOUSEOUT="startTimer(this)">
     Demonstration
   </A>
   

   The argument to the showDetails function in the onmouseover event must reference the ID of the related tooltip. This is how the script knows which element to display. The showDetails function supports three additional optional arguments for setting the top, left and default width. The default width is used only in Netscape. For example, to only set the default width you would call showDetails in the onmouseover event as follows:

   ONMOUSEOVER="showDetails('popup',null,null,150)"
   

You have now seen how to create a tooltip. When using the tooltip be aware that they will not display over SELECT or IFRAME elements in Internet Explorer and SELECT, INPUT, and TEXTAREA elements in Netscape. Also, in Netscape, the tooltips may stop working if the window is resized (this is a general problem with any positioned elements in Netscape).

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.