User interface design is tricky business.

When working with scientific data, UI designers often try to pack too much functionality into too little space, resulting in interfaces that are neither simple nor intuitive.  Users end up spending too much time learning how to navigate the interface, rather than interrogating the data. One small part of the solution is to provide detailed tooltips on how to use the interface.  This post describes a jQuery tooltip plugin and how it can be used to improve web based interfaces to scientific analysis.

The concept of tooltips is very simple — when the user points the mouse at something and waits, information about that something appears in a little window until the user moves the mouse again.  This is an excellent way of providing hints to users about the functionality of widgets in a user interface.  The user does not need to leave the interface to refer to documentation.  All the information a new user needs is at their fingertips while experienced users get to look at a clean, uncluttered interface.

Using the title attribute

For UI designers, the easiest way to add small amounts of information is to include the title attribute in any HTML tag.  All modern browsers will display a tooltip as in this example.


Picking a javascript tooltip library for more functionality

To present more structured information one must resort to one of the many javascript based tooltip libraries.  The problem is — which one?

We recently spent far too many a few hours reviewing a number of tooltip libraries trying to find one that had the right mix of functionality, simplicity, ease-of-use and likelihood of longer term support.  We narrowed our search to tooltip libraries based on one of the core javascript libraries.  In September, 2009 it appears as if jQuery has successfully captured the enthusiasm of the javascript community and has the most momentum for widespread adoption.  (We had previously enjoyed using prototype.js but are now making the switch to jQuery in our own work.)

If you google jquery tooltip you will find a number of implementations of tooltips, each with a slightly different focus.  We will not do a detailed comparison of all the different plugins but instead direct your attention to a tooltip library found on the second page of query results — jQuery clueTip.

Do not be alarmed by clueTip’s dowdy front page.  Other tooltip libraries may provide more eye candy but the clueTip plugin, in our estimation, is the best choice for reasons outlined below.

Karl Swedberg is the author of this plugin (as well as and he has borrowed heavily and intelligently from many of the previous tooltip libraries.  The clueTip plugin comes with a complete API and can handle content from any of three sources:

  • title attributes with special delimiters
  • hidden elements on the same page
  • separate files delivered by AJAX / AHAH

Other features include:

  • smart positioning
  • flexible behavior (e.g. “click to close”)
  • variety of styles

Most importantly, the clueTip plugin is licensed the same way as the jQuery core file, under a dual MIT and GPL license, and is free to use.

Using jQuery clueTip in scientific user interfaces

To properly document the functionality in scientific user interfaces it is desirable to present highly structured tooltips with detailed information, images, etc.  ClueTip makes this easy by allowing the inclusion of external chunks of HTML that will be loaded on demand.  The code to implement this behavior is quite straightforward.

First, you must include the appropriate javascript libraries in the <head> section of your page:


Second, you should add spans that will serve as the triggers for the tooltips.  We recommend using an easily identifiable ‘?’ in front of pertinent labels, text or forms elements, something like the following:

<!-- This span uses the jQuery.cluetip plug.
     The 'id' attribute is used to load in some html. -->

The clueTip plugin uses the id attribute as the URL containing tooltip content.  Each ‘?’ span will reference an appropriate file containing a chunk of HTML.

Third, you need to initialize the tooltips with the following initialization lines in YOUR_JQUERY_CODE.js:

$(function() { // Set up tooltips  $('span.tooltip').cluetip({width: '400', attribute: 'id'});});

The  {width: …, attribute: …} object passed to the cluetip method contains various clueTip options to change the behavior of your tooltips.

Fourth, you need to create some content to be displayed in the tooltip.  The HTML referenced by the id attribute should not be complete web pages with <head> and <body> sections.  You only need to include basic HTML markup as this will be inserted into a tooltip <div> element when the tooltip is activated.  You may create as complex a tooltip as you want with any HTML tags you wish.

That’s all there is. One of the nice things about this library is that only a minimal amount of javascript programming is required.  Content and behavior are well separated and it is easy to have non-programmers create the documentation displayed inside the tooltips.

A demonstration of tooltips in a scientific databrowser can be seen in the Rheumatology Databrowser — just hover over the small ‘?’ located to the left of the labels.

This entry was posted in Toolbox, User Interface Design and tagged , , . Bookmark the permalink.

Comments are closed.