Xpages 无法弹出 dojo 工具提示对话框

Posted 2023-02-16

【中文标题】Xpages 无法弹出 dojo 工具提示对话框

【英文标题】：Xpages can't get dojo tooltip dialog box to pop up

【发布时间】：2014-05-16 17:28:40

【问题描述】：

我有一个 dojoFilteringSelect 字段，我想为其添加一个 dojo 工具提示。如果用户将鼠标悬停在字段上（或者我可以在字段旁边放置一个图标），我希望显示计算字段的内容。

环顾四周，看到各种示例，但我找不到如何将工具提示连接到悬停动作？我在 Lotus 客户端中运行它。

我的代码如下。

                <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>
                    &#160;&#160;
                    <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>

【参考方案1】：

您非常接近您正在寻找的解决方案。

在 dojoFilteringSelect 字段本身上设置悬停工具提示功能并不是很有用，因为这样就不可能在那里选择一个值。相反，就像您已经建议的那样，让工具提示在图标或字段标签上起作用。

这是一个在将鼠标悬停在标签上时出现的工具提示对话框的示例：

<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>

标签的事件“onmouseover”（不是“onMouseOver”！）打开工具提示对话框。此事件仅在您不使用参数for="djFilteringSelect1" 时有效（我不知道为什么）。

我添加了一个事件“onmouseout”，当鼠标不再悬停在标签上时，它会关闭工具提示对话框。

您可以将相同的 CSJS 代码添加到工具提示对话框内的关闭按钮，而不是事件“onmouseout”。如果您想在工具提示对话框中单击链接或可编辑字段等内容，这将非常有用。

【讨论】：

这太棒了。我现在明白了很多。我能够完全按照我的意愿工作。非常感谢。

【参考方案2】：

如果您使用工具提示而不是工具提示对话框，而不仅仅是使用 for 属性，它将自动发生，无需代码。很简单。

在您上面的代码中，您使用的是 onclick 事件，这在 onMouseOver 上不起作用（这将是您需要的事件？）

霍华德

【讨论】：

你指的是什么工具提示？