spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column16


Dynamic Tooltips

Developer News
Google Going Native With Chrome
Mozilla Fixes Firefox Flaws as 3.5 Release Nears
Microsoft and Novell Still Bosom Buddies

This week we'll teach you how to implement dynamic tooltips -- the small yellow bubbles that pop out in many applications. They appear when you move the cursor over a tool button or a designated text segment and vanish when the cursor is removed from the object. Tooltips are attractive to the user because they provide additional information about a given object, without cluttering the screen with unnecessary data. Tooltips are powerful because they are context sensitive.

By now you're probably looking for our traditional front page demonstration. Simply head to the top of the page and move the cursor over the "home / experts / javascript" directory structure, without clicking any of those links. You'll find a different tootip for each link. Play around with this technique, while studying its most obvious characteristics. For example, the tooltip always appears directly below the pointer. In this column, you will learn:

  1. How to construct a tooltip with HTML.
  2. How to define a stylesheet for each tooltip on the page.
  3. How to associate a tooltip with a specific link via its event handlers.
  4. How to find out when the tooltip should be displayed.
  5. How to display a tooltip when required.
  6. How to clear a tooltip when the user removes the pointer from the link.
  7. How to associate a tooltip with multiple links that share the same URL.

We'll show you how to implement tooltips in two different ways. At this point you may choose to view the code for the first and second methods.

More Resources from Doc JavaScript
Columns Popular Columns Tips Tools
Latest Columns
41-50 | 31-40 | 21-30
11-20 | 1-10
Working with Windows
JavaScript and Frames
Bookmarklets
Random Tips
Personalized Tips
RSS Channels
Menu Builder
Rollover Builder
Rotation Builder
Reference Tip Categories (want one?)
Links
For Your Site
Did you learn something? Do you like this site? Please link to us!

http://www.internet.com

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
XML and PHP Simplified · Creating a ASP.NET Contact Form · Data Filtering with PHP
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Intel to Host Live Nehalem Q&A · 12 Tips to Troubleshoot Network File-Sharing · 10 Tips for Selling on Kijiji


Created: March 26, 1998
Revised: March 26, 1998

URL: http://www.webreference.com/js/column16/