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.
E.g.
<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.
E.g.
var myTabDiv = dojo.byId(“myTooltip”);
var widget = dojo.widget.byId(“myTab”);
var node = dojo.dom.firstElement(widget.controlButton.innerDiv,”span”);
dojo.widget.createWidget(
“dojo:tooltip”,
{connectId: node},myTabDiv);
Koranteng Ofosu-Amaah said
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.
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?
Shane O'Sullivan said
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">
.....
</div>
</div>
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.innerDivelement, as shown in the example.Shane
shine said
Good & Informative code