Question

My application has a list of indicators, each with its help button. Clicking on each button, brings up a ToolTipDialog with definition for each respectively. The way I have written the code (below), the content does not get refreshed when the user clicks on another help button within the list after having clicked the first one. I have not been able to figure out how to change the “content” dynamically. Any help will be appreciated:

HTML:

<div dojoType="dijit.layout.ContentPane" id="group1" title="Population projection" selected="true">
<table id="popIndTable">
<tr id="someID">
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkCBR" name="checkInd" /></td>
<td id="indCBR">Crude Birth Rate</td>
<td id="infoCBR"><img id="imgCBR" src="Images/help_icon2.png"  width="16px" onClick="showToolTipDialog(this,this.id);" /></td>
</tr>
<tr>
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkTest1" name="checkInd" /></td>
<td id="indTest1">Test 1</td>
<td id="infoTest1"><img id="imgTest1" src="Images/help_icon2.png"  width="16px" onClick="showToolTipDialog(this,this.id);" /></td>
</tr>
<tr>
<td><input data-dojo-type="dijit.form.RadioButton" class="checkInd" id="checkTest2" name="checkInd" /></td>
<td id="indTest2">Test 2</td>
<td id="infoTest2"><img id="imgTest2" src="Images/help_icon2.png"  width="16px" onClick="showToolTipDialog(this,this.id);" /></td>
</tr>
</table>
</div>

JavaScript:

function showToolTipDialog(node,infoId){
var infoText;
var infoElem = dojo.byId(infoId).parentNode.id;
if (infoElem == "infoCBR"){
infoText = "This is the text container for CBR";
}
else if (infoElem == "infoTest1"){
infoText = "This is the text container for Test1";
}
if (!tooltipDialog) {
tooltipDialog = new dijit.TooltipDialog({
content: infoText,
style: "width:200px;height:auto;",
autofocus: !dojo.isIE, // NOTE: turning focus ON in IE causes errors when reopening the dialog
refocus: !dojo.isIE
});
dijit.popup.open({ popup: tooltipDialog, around: node});
tooltipDialog.opened_ = true;
}
else {
if (tooltipDialog.opened_) {
dijit.popup.close(tooltipDialog);
tooltipDialog.opened_ = false;
}
else {
dijit.popup.open({popup: tooltipDialog, around: node});
tooltipDialog.opened_ = true;
}
}
}

Answer 1

It looks like you never reset the content of your tooltipDialog. You create it once, but once it’s created (new dijit.TooltipDialog({...})) it remains static.

I don’t know the Dojo API. But can you just set the content value directly? Perhaps immediately after your first else:

tooltipDialog.content = infoText;

This is just a guess, but if Dojo’s API is simple enough, that might do the trick.

If not, you might have to remove your if (!tooltipDialog) { check.