Version 1.0 - September 8, 2007

Cross-browser JavaScript tooltip

Introduction

Tooltips are those tiny windows that pop up when you move your mouse over an element and often provide extra contextual information.

You can add a tooltip to any element on a website by adding the title attribute. Move your mouse over this paragraph to see an example of such a tooltip.

Although these kinds of tooltips are extremely easy to create they are very limited. They can only contain text without any markup. The amount of text is also limited. You can add more than one line of text, but Mozilla Firefox does not support that and will only show the first part of the first line.

You can find free scripts online that do the same as this one, however they are often outdated with shitty code for browsers like Netscape 4 that nobody used for over 5 years, or they attempt to make an all in one solution requiring you ton install some JavaScript library and then some script with over 500 lines of code that you can configure to do just about anything but wash your underwear.

What this tooltip script does

This tooltip-script is not like that. It consists of 66 lines of JavaScript code and it will display tooltips containing HTML markup. It works in all major browsers. It has been tested in Internet Explorer 6, Firefox 2, Opera 9 and Safari 2.

To make this script work you have to 3 things:

Add the JavaScript file to your page.
Define the style for your tooltips.
Define the tooltips.

Demonstration page

Check out the demonstration page to see the tooltip script in action!

Adding the JavaScript

Just add the following code to your page, you can place it anywhere, but between the <head> makes the most sense.


<script type="text/javascrript" src="tooltip.js"></script>

Defining the style of the tooltips.

Although you can give each individual tooltip another style, each tooltip should be invisible and positioned 'absolute' for it to work, it also needs a background and the z-index makes sure it appears on top of all other elements.


.tooltip {
position:absolute;
top:0px;
left:0px;
z-index:100;
visibility:hidden;
border: solid 1px #1e6d5a;
width:220px;
padding:2px;
background-color:#fff;
}

This piece of CSS gives each tag that has the class attribute set to 'tooltip' this style.

You can extend this style with your own font size, colors, opacity, background and other properties to match your design.

Defining the tooltips

Define the tooltips consists out of two stages, first you have to define which element triggers the tooltip by adding a onmouseover and onmouseout attribute, like this:


<a href="demo.html" onmouseover="tooltip(event, 'mytooltip')" onmouseout="tooltip(event, 'mytooltip')">demo</a>

In this example 'mytooltip' is the ID of the element that appears as a tooltip, there can only be one element with the same ID on each page.


<div class="tooltip" id="mytooltip">example tooltip</div>

Notice that this element has the class set to 'tooltip' so that it has the style we previously defined.

You can add as many tooltips as you want to each page, just make sure they all have a unique ID.

Each tooltip can contain markup and images.

How to avoid problems

The tooltips are positioned absolute, this means that they will use the top left corner of their container that is positioned relative or absolute as a starting point. Usually this is the body of the page, in that cas eit works fine. If you place the tooltips inside a container that is positioned in such a way the tooltips will not appear on the right place.