JavaScript & HTML ToolTips
 
Feature highlight: Hints or Tooltips Popups
Credit: Soft Complex


Description
Tooltips or hint popups turn out to be very useful way to add messages to the Web interface without cluttering up the browser window. When the user drags the mouse over an area or image, then a tooltip appears with more info details. What makes Tigra Hints from SoftComplex (free source, just click here) even more flexible is the ability to add just about any HTML onto the Tooltip hint. So users do not have to be satisfied with text in their tooltips but can add images, tables - any HTML that does not require input itself like a button, link or form element. This is true because a tooltip/hint immediately hides away when the mouse is started to be dragged over it. Think of a tooltip as a purely informational popup. But given judicious use of CSS and tables (see the Tigra demo code for examples) - tooltips can be colorfully informative.

Key features and JavaScript elements

The Tigra Hints routines use setTimeOut() , CSS, and DIVs to create a very flexible system of hints and tooltips dialogs.The code is divided into three parts. hints.js is the main set of Javascript routines. This code never changes and must precede the hints_cfg.js routine where users define the hints and tooltip they are going to use on a page. In addition there is a stylesheet, hints.css, which we have created out of the common CSS styles used frequently in hints coding.

One can bring the hints.js and the hints.css inline onto your web page but remember that takes away the advantage of file reuse caching which most browsers provide to avoid having to download a portion of code that never changes but is is used by many web pages such as the hints.js if you use hints on more than one web page.

Wiring Up This Page

As a tutorial demonstration of the power of hints we have wired up this page with tooltips wherever we could apply them. And as it turns out that is pretty broad - any HTML component supporting the onMouseOver and onMouseOut events. Lets look at the most useful of these components:

P tags - Can expand a paragraph and give detailed credits or complete code examples;
DIV and SPAN tags - allows for CSS movable, stackable objects to be tooltipped;
FORMS objects - all the Forms objects like textarea, select, button, etc can have hints;

IMG - this is a powerful way to save screen real estate; thumbnails expand to full image;
Links - tooltips and links naturally go together explain why to go there;
Tables - tooltips and hints can be tied to specific TD cells.

So lets look at how to add a tooltip to the line below:
Hover over here.       

then the thumbnail image immediately below will have a full-blown image popup/hint. Then we will add a "follower" tooltip which is inactivated by hovering or clicking on another region.

Hover above thumbnail
In this second example, we shall attach a full scale image on a tooltip to the image at the left. This is a common occurrence. Developers do not want to use up precious screen real estate but at the same time want to make an image quickly available in full view if the user is interested. Users indicate interest by hovering over the image. Since the onClick event is not used, it is still available for a goto link associated with the thumbnail, as in this case where the thumbnail points to the Dreamweaver Mx2004 review. Try it - just click. Likewise the right-mouse click also remains active. The code to do all this is quite simple.

There are 3 variables you need to set in the Hints configuration file - hintscfg.js. The first variable, the HINTS_CFG array, sets all the properties of the hints such as offset from mouse, appearance delay time, and so forth (we explain in more detail below). The second variable, the HINTS_ITEMS array, is the definition of each hint enclosed in double quotes and separated from each other by a comma. Finally the object myHint, previously defined in the hints.js

So lets look at how the HINTS_CFG array is initialized. The documenting comments below tell the main story:

	var HINTS_CFG = {
	'top'        : 5, //  vertical offset in pixels of a hint from the mouse pointer
	'left'       : 10, //  horizontal offset of a hint from the mouse pointer
	'css'        : 'hintsClass', // a style class name for all hints, TD object (not used here)
	'show_delay' : 500, // the delay in miiliseconds between object mouseover and a hint appearing
                        // this is important to be non-zero to prevent "flashing"
                        // - that is tripping off hints with inadvertent mouse movements
                        // we use 500 milliseconds = 1/2 sec in this case.
	'hide_delay' : 90000, // a delay between hint appearing and hint auto-hiding
	                      // we use 90000 milliseconds = 90 seconds because
						  // we want the hint to remain until the user moves 
						  // mouse from over the object being tooltiped/hinted.
	'wise'       : true,  //when set to true, the hint will move itself in the 
                          //browser window if it otherwise would be cut off from view
	'follow'     : true, //when set to true the tooltip will track the mouse movement 
	'z-index'    : 0 // a z-index for all hint layers. This is important if you are using
                     // CSS layers and need to establish the tooltips as "highest" layer
};

Two notable points about HINTS_CFG array. First, the comments should come after the comma definition of each object property. Second, the delays are stored in milliseconds for use in the setTimeout() routines.

Next the HINT-ITEMS array defines each of the hints or tooltips to be used. Note that JavaScript array items start from base 0. So the first hint, "Just a statement with no tags" is called by the code - myHint.show(0).

var HINTS_ITEMS = [
    "Just a statement with no tags", //hint 0 - See how simple a tooltip can be
    "<img src='images/jshints.gif'>", //hint 1 - use a full-size image
	"<p class='row'> Backward pointer to previous tutorial   </p>",  //hint 2 - use of CSS
	"<p class='alerter'>Forward pointer to next tutorial", // /hint 3 - now some color
	"<p class='alerter'>A Follower Hint" //hint 4 -Note NO comma at the last follower tooltip
];
var myHint = new THints (HINTS_CFG, HINTS_ITEMS); //This defines the tooltips object

Now for some comments on HINTS_ITEMS. First, there is really no-limit to the number of hints a user can program. However, if a program does not work look for two common errors. The most common is the fact that each hint must be quoted. If you use HTML tags in your hint then the HTML tag's quotes can clash with the outer hint's quotes. So to avoid trouble make them outer hint quotes as double quotes(") and the inner tag quotes as single quotes(') to eliminate this mistake. Also remember that each hint string must end with a comma - so it pays to have one hint per line and add documenting comments at the end as above. Finally, it appears simple to create two or more types of hints on a page by just by creating different HINTS-CFG arrays. The problem is that the main hints.js routine uses an anonymous function where the THints object is not passed as a parameter. This means that multiple hint types on a page do not work. However, if anybody solves this problem - send solution to the editor and we will publish it with credits plus send a free t-shirt from one of our gallery sites like PicsofToronto.com or PicsofDetroit.com. Wowee.

Activating hints are simple. Just goto the tag you want to attach a hint or tooltip to and just insert the onMouseOver="myHint.show(1)" onMouseOut="myHint.hide() function call pair into the tag. As we shall see below users may want break up this pairing of function calls to create a follower hint. Also be sure to use the correct hint number in the myHint.show() call.

Now lets conclude our use of hints with an example of a follower hint.
Start by hovering mouse here Move mouse over the page End follower by passing mouse through here
I am not certain whether this is progress as such 'hints' could quickly be adopted for abusive purposes. But it also can be a handy reminder when a user is completing a form or needs to be guided to a series of "what's next" tasks.

Summary

Soft Complex has provided a fairly versatile hints/tooltips function. Web developers can get great value by clever setting of the hint configuration parameters and use of CSS in their tooltips. The real beneficiary is the end user who will see cleaner, less cluttered web pages with still great response time.

 
Top of Page  Tutorials Home  JavaScript References  JavaScript Books