Dojo Forum

I got 3 links on my page


a href="#" id='contextOne' class="headerTooltip" >Context One
a href="#" id='contextTwo' class="headerTooltip" >Context Two
a href="#" id='contextThree' class="headerTooltip" >Context Three


I have a .json file

var tooltipData = {
contextOne: [
{
title: 'Navigation 11',
text: 'This is how the tooltips work. And I love the layout. Simple and easy to code.'
}
],
contextTwo: [
{
title: 'Navigation 21',
text: 'Some random comments go here too. You can have whatever description you want.'
},
{
title: 'Navigation 22',
text: 'Some more random comments go here too. You can have whatever description you want'
}
],
contextThree: [
{
title: 'Navigation 31',
text: 'This is how the tooltips work. And I love the layout. Simple and easy to code.'
}
]
};


and here is my app.js

dojo.addOnLoad(function() {
//render each tooltip
dojo.query(".headerTooltip" ).forEach(function(node){
var tooltipInfo = tooltipData[node.id];
if (tooltipInfo) {
var tooltipHtml = dojo.doc.createElement('span');
dojo.forEach(tooltipInfo, function(tooltip) {
tooltipHtml.innerHTML += "" + tooltip.title + "" + tooltip.text + "";
});
new dijit.Tooltip({ connectId: node.id },tooltipHtml);
}
});
});


no errors, no tooltips. I know i am almost there..... but just can't see it...... help me understand guys..