XPages Tip : Dojo Tooltips As A Custom Control

Just like in traditional Lotus Notes client
development when it comes to XPages there is more then one way of doing
the exact same thing. Earlier today Matt White posted
on the subject of using Dojo Tooltips
in an XPage application. In an IM to Matt I mentioned that I was doing
something similar using using a custom control and in the comments on Matt’s
blog entry Tim Tripcony mentioned that he
uses passthru HTML to add rich content to the tooltips. So here we have
three different approaches to doing the exact same thing.

Looking at Tim’s idea of passthru HTML
I re-examined my custom control method and realized that I could also make
it so that I can put rich content into my tooltips. Here’s is my new custom
control. It has a single property called ‘connectID’ which I am accessing
using the compositeData global object. Inside the DIV I have added an ‘Editable
Area’ control, otherwise known as a facet.

In the XPage where I want the tooltip
to appear I drag in the custom control and in it’s properties I can see
my connectID property. I set that to be computed to getClientId("nameofControlToAttachTo"),
In this case it will be the label control with the ID of TestToolTip. Don’t
forget that tit is case sensitive.

In design mode you’ll see your new ToolTip

The green dot is where you can drag
in the rich content, it could be an image, a computed field, a label, you
can even drag a panel into the editable area and add other controls to
that panel. In the example below I dragged in a panel and then added an
image and button into the panel.

Now when you look at your page you’ll
see your tooltip with it’s rich content. Obviously some content ( like
buttons ) are useless in a tooltip because you can’t click on the content
of the tooltip in this context but the ability to add any control into
the facet can open some doors for other ideas. Imagine using a repeat control
in the tooltip to show the titles of document authors, the repeat handling
the case where there is more then one author.

The other advantage of using the tooltip
as a custom control is that you can add as many as you need to a single
xpage. You just need to set the connectID property and drag whatever contents
you want into the editable area and your done. No need to remember the
syntax for the dojo control.