Tip of the Iceberg

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: