Introduction to Tool Tips
The Tooltip is as commonplace on the web as the hyperlink these days. Tooltips are commonly used to provide an extra bit of information when you hover over an image, hyperlink or even a block of text. The basic tooltip technology is built into virtually all modern browsers and is simple to implement but it has its limitations. While you can show text easy enough, more robust options like defining styles and adding images are just not possible with the standard tooltip.
The Basic Tooltip
Making a basic tooltip is simple: just add “title” to your HTML element and voila– you have a tooltip. Title is recognized by just about every browser you can find and shows a nice simple tooltip to the user when the user hovers over the HTML element. Here’s an example of a text box with a title:
<input type="text" title="Enter your email address here">
Better Options
While the simple tooltip shown above is certainly a great user-friendly feature, it doesn’t allow for much creativity. In order to expand on the basic tooltip you can choose to write your own set of JavaScript functions to handle all the different behaviors of a tooltip like displaying on hover, presenting the tooltip with defined styles, setting animation to fade up/fade down the tooltip, making an option for the tooltip to be sticky which requires the user to close it, and simply closing the tooltip on the triggering element’s onmouseout. And those are just the basic functions of the tooltip. Another option is to go with something that has already been developed and tested.
Now there are several versions of tooltip software available these days. So, which one do you choose? My suggestion is that you first look at software that is built specifically for your technology choice, i.e. ASP.NET, PHP, etc. Often software built for a specific technology will be easier to implement than options that are more technology agnostic. If you can’t find a technology-specific option that you like or you need to deploy tooltips that will work under multiple technologies then you should look to a simple JavaScript solution like the Dynamic Web Coding Tooltip.
How They Work
The concept is simple, handle hovering and focus to display a layer on top of the page the user is viewing. The implementation, however, is much more complicated. You need to account for cursor position as it relates to the bounds of the page so that your tooltip doesn’t end up off the viewable screen somewhere. You will most likely want a simple solution that doesn’t require each instance of a tooltip to list every possible event and related function call, e.g. onmouseout, onfocus, onblur, etc. You will also want a way to define different styles in your tooltip as well as border thickness, color, etc. As you can see a truly enhanced tooltip would require a great deal of coding.
The solution I recommend is dishing out a little cash and saving yourself countless hours of coding. Below we’ll walk through setting up a tooltip that has an image and some text that is nicely formatted with the image on the right of the tooltip. I have chosen to show you how Dynamic Web Coding implements their tooltip since it is technology neutral. This should give you an excellent look into how one software designer has organized and implemented their code in order to make implementation of the enhanced tooltip as simple as possible.
With the Dynamic Web Coding Tooltip there are four basic areas of focus: the JavaScript library files that handle all of the functionality, the style definitions, the JavaScript functions that handle the tooltip’s content and behavior definitions, and configuring the web element that triggers the tooltip.
The JavaScript libraries are the simplest to include. They are added to the <head> like this:
<script src="js/dw_event.js" type="text/javascript"></script> <script src="js/dw_viewport.js" type="text/javascript"></script> <script src="js/dw_tooltip.js" type="text/javascript"></script> <script src="js/dw_tooltip_aux.js" type="text/javascript"></script>
The next step is to define the content and behavior of the tooltip which is handled in a set of functions that are included on the page. The example below shows how to define a tooltip that includes formatted text and an image. It also defines the behavior to make the tooltip sticky, i.e. stay until the user closes it.
dw_Tooltip.defaultProps = {
sticky: true,
showCloseBox: true,
closeBoxImage: 'images/close.gif',
positionFn: dw_Tooltip.positionWindowCenter
}
dw_Tooltip.content_vars = {
myTestTip: {
caption: 'My Test Tooltip',
img: 'images/MyTestImage.gif',
txt: 'Descriptive text about image.',
wrapFn: dw_Tooltip.wrapTextByImage,
w: 250
}
}
The dw_Tooltip.defaultProps handles defining the behavior so that our tooltip is sticky, shows a close box for the user to click, defines what image to use for the close button, and how the tooltip is to be positioned. The dw_Tooltip.content_vars then handles defining the actual contents of the tooltip and the tooltip size (250px). In our case we have just the one tooltip but you could include as many tooltips here as you like.
The next step is to then hook up our tooltip to an HTML element on our page or set of elements using the <span> tag. To achieve this define the class for your element to a specific naming convention that the tooltip software recognizes:
<span class="showTip myTestTip"> Check out my new image. <br /> <a href="somewhere.html">My image detail link</a> </span>
Stylin’ Like the Big Boys
Lastly, you will want to make your tooltip look polished with some style definitions. This too is achieved by defining styles using a specific naming convention. The styles can either be defined on the page or as part of a Cascading Style Sheet (CSS) file that you have created. Here is an example of style definitions that could be included in the <head> on our page:
<style type="text/css">
div#tipDiv {
color:#000; font-size:11px;
background-color:#E1E5F1; border:1px solid Red;
width:250px;
}
div#tipDiv .stickyBar {
background-color:Red;
}
div#tipDiv .stickyTitle {
padding:0 0 2px 4px; color:White; font-size:14px;
}
div#tipDiv div.stickyContent {
padding:4px;
}
div#tipDiv td { font-size:11px; }
div#tipDiv div.img { text-align:center }
div#tipDiv div.txt { }
</style>
Conclusion
The examples above show just a sampling of the options and definitions that are available to you for both styling your tooltip and defining its behavior. If you want to see how an enhanced tooltip can really add flair and convenience to your website take a look at Netflix. They use enhanced tooltips to offer a convenient way for their customers to see details on movies that might interest them. The technique is both incredibly user-friendly and stylistically pleasing which gives it a very high “wow” factor.
Happy coding!
