Xpages can't get dojo tooltip dialog box to pop up - dojo

Question

I have a dojoFilteringSelect field which I want to put a dojo tootltip for. If the user hovers over the field (or I could put an icon next to the field) I want the contents of a computed field to show up.
Looked around and saw various examples but what I cannot find is how to connect the tool tip to the hover action? I am running this in the Lotus client.
My code is below.
<xe:djFilteringSelect id="djFilteringSelect3"
rendered="true" value="#{document1.loc}" tabIndex="1">
<xe:this.defaultValue><![CDATA[""]]></xe:this.defaultValue>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:getComponent("lookupLocs").getValue();}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onClick" submit="false">
<xe:this.script><![CDATA[XSP.openTooltipDialog("#{id:tooltipDialog1}", "#{id:label1}")]]></xe:this.script>
</xp:eventHandler></xe:djFilteringSelect>
  
<xe:valuePicker dialogTitle="Locs with Loc Manager"
for="djFilteringSelect1">
<xe:this.dataProvider>
<xe:simpleValuePicker>
<xe:this.valueList><![CDATA[#{javascript:getComponent("lookupLocs2").getValue();}]]></xe:this.valueList>
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
<xe:tooltipDialog id="tooltipDialog1"></xe:tooltipDialog></xp:td>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[XSP.addOnLoad(function(){
XSP.getElementById("#{id:djFilteringSelect1}").focus();
});]]></xp:this.value>
</xp:scriptBlock>
<xp:td style="width:229.0px">
<xp:message id="message1" for="loc"></xp:message>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td>
<xp:label id="label3" value="Work Category" style="font-weight:bold"></xp:label>
</xp:td>
<xp:td>
<xe:djFilteringSelect id="djFilteringSelect2"
rendered="true" value="#{document1.workCategory}" tabIndex="2">
<xe:this.defaultValue><![CDATA[""]]></xe:this.defaultValue>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var db = new Array(#DbName()[0], 'TSCTT.nsf');
#DbColumn(db, "workCategoryView", 1)
}]]></xp:this.value>
</xp:selectItems>
</xe:djFilteringSelect>

Answer 1

You are very close to the solution you are looking for.
It is not really useful to set the hover tooltip function on dojoFilteringSelect field itself as it is then impossible to select a value there. Instead, like you suggested already, let the tooltip work on an icon or the field's label.
This is an example for a tooltip dialog appearing on hovering over label:
<xp:label value="Label" id="label1">
<xp:eventHandler event="onmouseover" submit="false">
<xp:this.script><![CDATA[
XSP.openTooltipDialog("#{id:tooltipDialog1}", "#{id:label1}")
]]></xp:this.script>
</xp:eventHandler>
<xp:eventHandler event="onmouseout" submit="false">
<xp:this.script><![CDATA[
XSP.closeTooltipDialog("#{id:tooltipDialog1}")
]]></xp:this.script>
</xp:eventHandler>
</xp:label>
<xe:djFilteringSelect id="djFilteringSelect1" rendered="true"
value="#{document1.loc}">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:
["abc","def","xyz"]
}]]></xp:this.value>
</xp:selectItems>
</xe:djFilteringSelect>
<xe:tooltipDialog id="tooltipDialog1" title="This is the dialog title">
<xp:text escape="true" id="computedField1">
<xp:this.value><![CDATA[#{javascript:
"This is the computed value"
}]]></xp:this.value>
</xp:text>
</xe:tooltipDialog>
Label's event "onmouseover" (not "onMouseOver"!) opens the tooltip dialog box. This event works only if you don't use the parameter for="djFilteringSelect1" ( I don't know why).
I added an event "onmouseout" which closes the tooltip dialog when mouse no longer hovering over label.
Instead of event "onmouseout", you can add same CSJS code to a close button inside tooltip dialog box. This is useful if you have things on tooltip dialog box you want to click on like links or editable fields.

Answer 2

If you use the tooltip and not the tooltipdialog than just use the for property and it will happen automatically, no code needed. Very simple.
In your code above you are using the onclick event, that will not work onMouseOver (which would be the event you need?)
Howard