JavaScript
  Home arrow JavaScript arrow Page 2 - Interacting with Tooltips and Previews
The Best Selling PC Migration Utility.
Dev Shed Forums 
Administration  
Apache  
BrainDump  
DHTML  
Flash  
Java  
JavaScript  
Multimedia  
MySQL  
Oracle  
Perl  
PHP  
Practices  
Python  
Reviews  
Security  
Style-Sheets  
Web Services  
XML  
Zend  
Zope  
Forums Sitemap 
IBM® developerWorks 
Dedicated Servers 
E-Commerce Hosting 
Linux Web Hosting 
Managed Hosting 
Small Business Hosting 
Download TestComplete 
VPS Hosting 
Weekly Newsletter

 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
JAVASCRIPT

Interacting with Tooltips and Previews
By: O'Reilly Media
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 2
    2007-10-04

    Table of Contents:
  • Interacting with Tooltips and Previews
  • Tooltips in a JavaScript File
  • In-Page Previews
  • Live Echo Preview

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    Iron Speed
     
    ADVERTISEMENT

    Virtual Tradeshows by Ziff Davis Enterprise - A Unique Opportunity to Connect with IT Experts, Access Information, and Gain Insight on today's Technology

    Interacting with Tooltips and Previews - Tooltips in a JavaScript File
    (Page 2 of 4 )

    Example 4-8 shows the new JavaScript file.

    Example 4-8. Providing tooltips for form and other elements

    var xmlhttp;                // global XMLHttpRequest obj
    var helpItem;               // current help item
    var helpObj = new Object(); // cached help items
    var posX; var posY;

    // setup tooltip event
    function addTooltip(ttObj) {
       aaManageEvent(ttObj,"mouseover",showHelp);
       aaManageEvent(ttObj,"mouseout",hideHelp);
    }

    // attach tooltip events to objects
    aaManageEvent(window,"load",function() {
       var items = document.getElementsByTagName('label');
       for (var i = 0; i < items.length; i++) {
         
    addTooltip(items[i]);
       }
      
    addTooltip(document.getElementById('title'));
      
    addTooltip(document.getElementById('link'));
    });
    // get help from the server
    function showHelp(evnt) {
     
    evnt = (evnt) ? evnt : window.event;

      // get position
      posX = evnt.clientX;
      posY = evnt.clientY;

      // get XMLHttpRequest object if not set
      if (!xmlhttp) xmlhttp = aaGetXmlHttpRequest();
      if (!xmlhttp) return;

      helpItem = (evnt.currentTarget) ? evnt.currentTarget.id : evnt.srcElement.id;
      var qry = "item=" + helpItem;

      // if cached item, print existing and return
     
    if (helpObj[helpItem]) {
          printHelp();
          return;
      }

      // invoke help system
      var url = 'help.php?' + qry;
      xmlhttp.open('GET', url, true);
      mlhttp.onreadystatechange = getHelp;
      xmlhttp.send(null);
    }

    // hide help bubble
    function hideHelp() {
    //I would suggest changing the class name instead of directly manipulating style properties//
      
    document.getElementById('help').style.visibility="hidden";
    }
    // display help
    function getHelp() {
      
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          helpObj[helpItem] = xmlhttp.responseText;
          printHelp();
      
    }
    }

    //position tooltip
    function printHelp() {
      var help = document.getElementById('help');
      help.innerHTML = helpObj[helpItem];
      y = posY - 130;
      if (y < 0) y = 10;
      help.style.top = y + "px";
     
    help.style.left = (posX + 10) + "px";
     
    help.style.visibility="visible";
    }

    View the tooltips in action in Figure4-2 .


    Figure 4-2.  Tooltips in action, providing users with extra information

    Again, it seems a lot of code to create a simple effect, but it's also code that can be easily repackaged for use in a separate library. All you have to do is provide a way to create the tooltip object, passing in the location and content, and the tooltip object takes care of the rest. You could package more of the functionality, passing in just an element, and the tooltip object can take care of the event handling, though you'll most likely need to provide the content unless you embed the contents as elements in the page rather than pulling it in from a web service.

    An even simpler approach is to use an existing tooltip library. One such library is Tooltip.js, which is based on Prototype and script. aculo.us. You can download the most recent version of the library at http://tooltip.crtx.org.

    For effects such as those found on Netflix and Blockbuster, you'll need to provide an image that has a transparent background. The only way to do this is to use a transparent GIF or a PNG image, though the latter doesn't work that well with IE (not even with IE 7, which adds some odd color effects). You'll have to layer your effect, providing a header and footer image, and a separate body image that can repeat along the vertical axis so that it can be resized based on the length of the contents.

    One other important item to remember when providing this type of functionality is that tooltips don't work if scripting is disabled. However, one workaround is to provide hypertext links around the element to open a separate page and use anchors for individual help items.

    More JavaScript Articles
    More By O'Reilly Media


       · This article is an excerpt from the book "Adding Ajax," published by 'publisher'. We...
     

    Buy this book now. This article is excerpted from chapter four of Adding Ajax, written by Shelley Powers (O'Reilly, 2007; ISBN: 0596529368). Check it out today at your favorite bookstore. Buy this book now.

       

    JAVASCRIPT ARTICLES

    - Getting Attention with Interactive Effects
    - Interacting with Tooltips and Previews
    - Just-in-Time Information and Ajax
    - Interactive Effects
    - Using Cookies With JavaScript
    - Understanding the JavaScript RegExp Object
    - Controlling Browser Properties with JavaScri...
    - Using Timers in JavaScript
    - Form Validation with JavaScript
    - JavaScript Exception Handling
    - Stringing Things Along
    - Understanding The JavaScript Event Model (pa...
    - Understanding The JavaScript Event Model (pa...
    - An Object Lesson In JavaScript

    Iron Speed



    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 2 hosted by Hostway