Shane O'Sullivan's technical blog… really ties the room together

Adding a ToolTip to a Dojo Tab Container

Posted by Shane O'Sullivan on April 10, 2007

Using the Dojo Tooltip widget with the TabContainer is not as simple as one would like. It would be nice if it were possible to simply identify the Tab button by ID and add a Tooltip to it’s domNode element, which is the base DOM node that this widget is associated with. However, this does not work as the positioning of the Tab button plays havoc with the tooltip.


<span dojoType=”dojo:tooltip” caption=”My Tooltip” id=”myTooltip”/>
<div widgetId=”myTab” dojoType=”dojo:ContentPane” label=”Info”> ….

var myTabDiv = dojo.byId(“myTooltip”);

var node =dojo.widget.byId(“myTab”).domNode;
dojo.widget.createWidget(“dojo:tooltip”,{connectId: node},myTabDiv);

The code above does not work, unfortunately. The fix is to create the Tooltip on a Span element inside the Tab button control. This will result in the Tooltip appearing correctly when you mouse over the text on the button.


var myTabDiv = dojo.byId(“myTooltip”);
var widget = dojo.widget.byId(“myTab”);
var node = dojo.dom.firstElement(widget.controlButton.innerDiv,”span”);
{connectId: node},myTabDiv);

4 Responses to “Adding a ToolTip to a Dojo Tab Container”

  1. interesting… I’m in the middle of porting tab container to the 0.9 release. I think I’ll add a couple of test cases on this… I’ll see how that goes. Things are quite a bit different in the new world of dijit.

  2. Panini said

    interesting, but can you post the other part of the code too where you define the Tab button control and the embedded span element for the tooltip, so that we can see what you did?

  3. Well, I don’t create the Tab button control directly, instead I create a number of tabbed pages in the usual way, e.g

    <div id="myTooltip">This is the tooltip content </div>
    <div id="maintabContainer" dojoType="dojo:TabContainer" style="width: 100%; height: 60em;" >
    <div widgetId="tabInfo" dojoType="dojo:ContentPane" label="Info" class="tabPane">

    The Dojo code then uses its templating mechanism to create the internal span DOM node. You retrieve this by getting a reference to the widget, then accessing its controlButton.innerDiv element, as shown in the example.

  4. shine said

    Good & Informative code

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: