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

Archive for the ‘tooltip’ Category

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);

Posted in Ajax, Dojo, Javascript, open source, tab, Technical, tooltip | 4 Comments »

%d bloggers like this: