XPages

Dojo ToolTips

Tooltips are one of those little features which you rarely have the time to add to your website (beyond the basic title settings of your HTML elements), but do add a surprising amount of polish to your application from your user's point of view.

In an application that I have been working on recently, we added some tooltips to convey some specific information on how to use certain features and the extra help went over really well. But how do you add them in XPages?

Well Dojo is your friend, and more specifically one of the "dijit" package of plugins called dijit.ToolTip. So in your XPage you add a computed field with the display type set to HTML. In the value of the field add the following:

"<div dojoType=\"dijit.Tooltip\"\n" +

"connectId=\"" + getClientId("hoverlabel") + "\" style=\"display:none;\">\n" +

"This is a tooltip\n" +

"</div>";

Basically what we're doing is creating a div that will get written out to the browser, the important elements are the dojoType which tells Dojo that this is something it needs to look at when the page loads. The connectId links the div to the label which we want to add the tooltip to. So in this case, I have a label called "hoverlabel". Set the div to be hidden using CSS so that while Dojo is processing it after the page load, it doesn't appear and then disappear very quickly.

Finally we just need to make sure that Dojo is enabled on our XPage, so:

  1. Go to the All Properties of your XPage and then Basics, make sure that dojoParseOnLoad is set to true
  2. I also set the dojoTheme to true as well.
  3. Then in the resources property (still in All Properties -> Basics) click the Add button and choose xp:dojoModule)
  4. In the dojoModule -> basics -> name property which gets added, set the value to "dijit.Tooltip"

 It's really very simple to get going and this is what you end up with:

A really nice looking tooltip with no coding on from out point of view that will be very helpful for your users.