This document explains how to make nice multiline tooltip for HTML documents, using simple and standard CSS, HTML and JavaScript.

1 Standard HTML tooltip

The “title” attribute of HTML's tags can be used to create simple tooltips. When the cursor stays over the tag for few seconds, the browser shows automatically the tooltip. But the tooltip's look and layout depend on the browser, and they are not configurable. If one just wants to split the tooltip's contents into two or more lines, there is not standard way to do this. For example:

<img ... title="Printable version" />

2 How to make cool tooltip

Using CSS and few lines of JavaScript it is possible to make tooltips whose contents can be any HTML, including images, tables, whatever can fit into a <div> tag. Here is an example:

The blue area is the tooltip, containing many lines of text and an image. To add a cooler effect, the background has transparency! This can be achieved with the following steps:

• The tooltip area is defined as a <div> tag, containing text, line breaks, link to the image and whatever HTML one wants. The id attribute of the <div> tag is used to uniquely identify the tooltip in the document.

• Using CSS the <div> is initially positioned at (0,0) (upper left corner of the page) and is not visible.

• The onMouseOver attribute of the HTML element owning the tooltip sets the position the <div> element relative to its position in the page, and it makes it visible.

• The onMouseOut attribute of the HTML element hides the <div>.

Let's explain how to implement each step.

2.1 CSS

The following CSS style defines the initial state of the tooltip element:

.xstooltip 
{
    visibility: hidden; 
    position: absolute; 
    top: 0;  
    left: 0; 
    z-index: 2; 

    font: normal 8pt sans-serif; 
    padding: 3px; 
    border: solid 1px;
}

This defines the element as hidden, positioned at (0,0), and it sets the z-order of the element to a value higher than 0, to have it on top of other elements in the page.

The position is set to (0,0) in order to let the browser automatically calculate the size of the <div> based on its actual contents. If it would be positioned directly relative to its parent, and the position was near the right border of the browser's window, the <div> would be formatted as a narrow and tall rectangle.

Other CSS directives can be applied to the style; like font, border and padding in the example.

To add the background transparency as in the image above simply add:

    background-repeat: repeat;  
    background-image: url(images/blue.png); 

Where the background image is a 16x16 png having a blue color with some degree of alpha transparency. This would not work in IE, because it does not support transparent PNG images.

2.2 <DIV>

Into the HTML document the tooltip can be defined as:

<div id="tooltip_123" class="xstooltip">
Time spent: 00:00:08<br/>
Page viewed: 4<br/>
Location: Loopback <img src='flags/x0.gif' /><br/>
Browser: Mozilla – 1.7.11<br/>
Operating system: Linux - i686 (x86_64)
</div> 

The <div> tag must have an unique id attribute identifying itself and must have the CSS style defined above (either using the class or style attribute). It will be not visible when the page is loaded, but the browser will calculate its size depending on its contents.

2.3 onMouseOver - onMouseOut

The element that owns the tooltip has to place into its onMouseOver attribute the JavaScript code that positions and shows the tooltip, and into its onMouseOut attribute the code that hides it again, like in:

<img id="the_image"
    .... 
    onmouseover="xstooltip_show('tooltip_123', 'the_image', 289, 49);"
    onmouseout="xstooltip_hide('tooltip_123');" 
/>

The source of the xstooltip_show() and xstooltip_hide() functions will be examined in details later in the document. Now let's just see their definition and usage:

So when the mouse pointer is moved over the owning element, the tooltip is put at the given position relative to the owner, and made visible. When the mouse pointer goes out the owning element, the tooltip is hidden.

3 The JavaScript

This section shows and explains the JavaScript code needed to position and show, and then to hide, the tooltip element. A way to find out the absolute position in the page of the element owning the tooltip is needed:

function xstooltip_findPosX(obj) 
{
  var curleft = 0;
  if (obj.offsetParent) 
  {
    while (obj.offsetParent) 
        {
            curleft += obj.offsetLeft
            obj = obj.offsetParent;
        }
    }
    else if (obj.x)
        curleft += obj.x;
    return curleft;
}

function xstooltip_findPosY(obj) 
{
    var curtop = 0;
    if (obj.offsetParent) 
    {
        while (obj.offsetParent) 
        {
            curtop += obj.offsetTop
            obj = obj.offsetParent;
        }
    }
    else if (obj.y)
        curtop += obj.y;
    return curtop;
}

These functions find the absolute X and Y position into the HTML page of the element passed as an argument, recursively examining the position of the element's parents.

function xstooltip_show(tooltipId, parentId, posX, posY)
{
    it = document.getElementById(tooltipId);
    
    if ((it.style.top == '' || it.style.top == 0) 
        && (it.style.left == '' || it.style.left == 0))
    {
        // need to fixate default size (MSIE problem)
        it.style.width = it.offsetWidth + 'px';
        it.style.height = it.offsetHeight + 'px';
        
        img = document.getElementById(parentId); 
    
        // if tooltip is too wide, shift left to be within parent 
        if (posX + it.offsetWidth > img.offsetWidth) posX = img.offsetWidth - it.offsetWidth;
        if (posX < 0 ) posX = 0; 
        
        x = xstooltip_findPosX(img) + posX;
        y = xstooltip_findPosY(img) + posY;
        
        it.style.top = y + 'px';
        it.style.left = x + 'px';
    }
    
    it.style.visibility = 'visible'; 
}

This function positions and shows the tooltip, relative to its owner. The id of the tooltip element is tooltipId, the id of the owner element is parentId, the upper left corner of the tooltip is placed, relative to the upper left corner of the parent element, to (posX, posY).

    it = document.getElementById(tooltipId);
    
    if ((it.style.top == '' || it.style.top == 0) 
        && (it.style.left == '' || it.style.left == 0))
    {

If the tooltip has not been shown yet (its absolute position is not set or it is still set to (0,0)), then it is positioned.

        it.style.width = it.offsetWidth + 'px';
        it.style.height = it.offsetHeight + 'px';

These 2 instructions set the CSS absolute size of the tooltip element to the default size assigned to it by the browser. So when it is moved in its final destination, it does not resize, even if near to the window's borders. They are needed by IE.

        if (posX + it.offsetWidth > img.offsetWidth) posX = img.offsetWidth - it.offsetWidth;
        if (posX < 0 ) posX = 0; 

This code is optional, it simply adjusts the position of the tooltip element to keep it inside the horizontal shape of the owning element. Usually it is not needed, but if the owning element is near the right border of the window, moving the tooltip there could change the HTML page width, and could make show up the horizontal scrollbar.

        x = xstooltip_findPosX(img) + posX;
        y = xstooltip_findPosY(img) + posY;
        
        it.style.top = y + 'px';
        it.style.left = x + 'px';

Sets the position of the tooltip, relative to the position of the owning element.

it.style.visibility = 'visible'; 

Finally makes it visible. That's all!

function xstooltip_hide(id)
{
    it = document.getElementById(id); 
    it.style.visibility = 'hidden'; 
}

This simply hides the tooltip. Its position is not changed. The next time xstooltip_show() is called for the same tooltip, the position in not changed.