Tooltips in dijit.layout.TabContainer

Some time back I started using dijit.layout.TabContainer from DOJO Toolkit in my user interface. Soon a particular requirement came where I needed to attach tooltips to the tab headings in the tab container. In the following I outline the issues I faced and solutions I figured out for the same.

DOJO toolkit comes with a widget dijit.Tooltip which can be used to easily associate rich tooltips with any element in the page. It requires the "id" of the element with which the tooltip will be associated. After some experiments with Firebug, I figured out that when a dijit.layout.TabContainer is parsed, specific ids are assigned for the titles of content panes inside it. These ids look like:

• dijit_layout__TabButton_0
• dijit_layout__TabButton_1
• dijit_layout__TabButton_2
• and so on...

Depending upon your page structure and number of tab containers in the page, these ids would vary.

I first tried to add a declarative tooltip like as follows.

But as luck would have it, it didn't work. I guess the reason is the fact that the ids are assigned at runtime during parsing and probably when the tooltip was processed, the corresponding connect ids were not yet assigned. So I had to figure out an alternative solution.

dojo.addOnLoad(function(){setTimeout(function(){addTooltips();}, 1000);});

function addTooltips()

{

var tooltip = new dijit.Tooltip({

connectId: ["dijit_layout__TabButton_0"],

label : 'Hello World'

});

}

What this achieved was following:

• Call a function 1 second after the page has been loaded. By this time, the ids for different titles for tabs inside the tab container are expected to be associated.
• Create the tooltips at run time based on the generated ids.

This approach worked. May be there is a better way of doing this, but this works for me now :)