Tip of the Iceberg :: Dojo tooltips as a custom control in XPages

Category xpages
Earlier today, Matt White posted a method for adding hover tooltips to an XPage. Declan mentioned that he uses a custom control for this, as do I; here's the source of mine:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:this.resources>
        <xp:dojoModule name="dijit.Tooltip"></xp:dojoModule>
    </xp:this.resources>
    <div dojoType="dijit.Tooltip"
        connectId="#{javascript: return getClientId(compositeData.get('target'));}">
        <xp:callback facetName="tooltipContents" id="tooltipBody"></xp:callback>
    </div>
</xp:view>

The compositeData referenced in the connectId attribute refers to the string property of "target" defined for the custom control. The callback defines an editable area control into which you can drag any content that should display inside the tooltip. Imagine, for example, you have a link that you want to attach a tooltip to:

<xp:link id="linkToDocument" text="#{javascript: return thisViewEntry.getColumnValues()[0];}" value="...some code to link to the document..." />

Add the custom control below the link, set its target property to "linkToDocument", then drag a table into the editable area. Add a label and some code to retrieve a property of the document...

<xc:ccTooltip target="linkToDocument">
    <xp:this.facets>
        <xp:panel xp:key="tooltipContents">
            <xp:table>
                <xp:tr>
                    <xp:td><xp:label value="Submitted: " style="font-weight:bold;" /></xp:td>
                    <xp:td>
                        <xp:text value="#{javascript:return thisViewEntry.getDocument().getCreated().toJavaDate();}" escape="true">
                            <xp:this.converter>
                                <xp:convertDateTime type="date" dateStyle="short"></xp:convertDateTime>
                            </xp:this.converter>
                        </xp:text>
                    </xp:td>
                </xp:tr>
            </xp:table>
        </xp:panel>
    </xp:this.facets>
</xc:ccTooltip>

Voila:

Comments

1 - @Keith, on the XPage containing the tooltip control, be sure to specify a class for the whole page - specifically, one of the Dojo theme classes (the one I most frequently use is tundra). On the source tab, you'll see it show up as the styleClass attribute of the view node:

<xp:view xmlns:xp... styleClass="tundra">

When rendered to the browser, this becomes the class for the body tag, which Dojo uses to apply style rules for all dijits.

Posted by Tim Tripcony At 05:53:19 PM On 07/21/2009 | - Website - |

2 - Great post Tim, Thanks! Quick question though, I'm able to get this to work for the most part, the tool tip shows up with the text I want. However, I don't get the cool styling, mine is just a square box with a gray background. Any ideas on what may be the issue?

Posted by Keith Strickland At 04:32:33 PM On 07/21/2009 | - Website - |