Recently I had to add nice tooltips to a larger Web application that is based on the Dojo framework. I thought “nothing easier that that”, as with jQuery I can do stuff like

jQuery('a').tooltip();

with some (optional) parameters and that’s it. Unfortunately I had to learn from the various sources and samples that this simple feature is not supported out of the box by Dojo. There is a way of creating tooltips on the fly but there does not seem to be a ready-to-use solution which uses the title tag of the elements and shows a tooltip based on that.

So here is the code I came up with to display Dojo tooltips based on the title tag:

dojo.addOnLoad(function() {
  //render each tooltip
  var i = 0;
  dojo.query(".withTooltip").forEach(function(node) {
      if(!node.title)
          return; // don't do anything if there is no title
      if(!node.id) // Dojo requires an ID for the element
      {
          node.id = "dojoToolTip-"+i;
          i++;
      }
      var tt = new dijit.Tooltip({label:node.title, connectId:[node.id]});
      node.title = ""; // remove the Browsers standard title tag
  });
});

The code selects all elements with the class “withTooltip” and creates a Tooltip dijit for each of the found elements. It is important to notice that an ID is being added in case there is none – dijit.Tooltip requires an id and does not seem to work with classes or just an element being specified.