带有工具提示按钮的 primefaces 输入答案

【问题标题】：primefaces input with tooltip button带有工具提示按钮的 primefaces 输入
【发布时间】：2013-08-16 10:31:52
【问题描述】：

我想创建 input-field-attached-tooltip-button（我不知道该怎么称呼它）。像这样的：

当您将鼠标悬停在问号图标上时，您会看到帮助文本。

理由：这个小图标清楚地表明该领域有帮助。您可以看到帮助确实可用，甚至无需将鼠标指针移动到该字段。给用户这种温暖的模糊感觉。

我无法弄清楚如何在 PrimeFaces 中执行此操作。

我不知道上面的例子是哪个框架产生的，但我很确定它不是 PrimeFaces。

我很清楚<p:tooltip>，但我不认为它可以做到这一点。

【问题讨论】：

我认为<p:overlayPanel> 可能是如果要从头开始创建自定义解决方案的答案的一部分。我希望有一个更开箱即用的解决方案。 :-)
只需将其包装在标记文件或复合文件中即可。
是的，但它永远不会成为输入字段的组成部分吗？（忍受我，我不太擅长这个）。如果我将我的字段放在<p:panelGrid>> 中，那么我需要多少列？我希望只需要两列的东西：标签和字段。有些字段会有帮助图标，有些则没有。
只需将输入+帮助包装在另一个标签文件中。
@BalusC。谢谢。知道了！。我会试一试并在这里为那些希望关注的人发布。

标签： jsf primefaces

【解决方案1】：

这就是我在 PrimeFaces 中的想法：

（我的屏幕截图没有显示鼠标指针）

我几乎接受了 BalusC 的建议并创建了一个 JSF 自定义组件。这是我的自定义组件的样子：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:composite="http://java.sun.com/jsf/composite">


    <composite:interface>
        <composite:attribute name="helptext"/>
        <composite:attribute name="show" />
    </composite:interface>

    <composite:implementation>
        <p:button id="help" style="width: 15px; height: 15px" icon="ui-icon-help" rendered="#{cc.attrs.show}"/>
        <p:overlayPanel for="help" showEvent="mouseover" hideEvent="mouseout" hideEffect="fade" >
            <p:panel>
                #{cc.attrs.helptext}
            </p:panel>
        </p:overlayPanel>

    </composite:implementation>
</html>

生成上述截图的 xhtml 如下所示：

<h:form>
    <p:panelGrid columns="3" styleClass="noBorders">

        <p:outputLabel for="mydate" value="Date"  />
        <p:calendar id="mydate"  pattern="yyyy/MM/dd" />
        <customC:fieldhelp helptext="Help text for date field." show="true" />

        <p:outputLabel for="myboolean" value="Send now ?" />
        <p:selectBooleanCheckbox id="myboolean" />
        <customC:fieldhelp helptext="Help text for boolean field." show="false"/>

        <p:outputLabel for="mypwd" value="Your password" />
        <p:password id="mypwd" size="30" />
        <customC:fieldhelp helptext="Help text for password field." show="true"/>

    </p:panelGrid>
</h:form>

似乎工作正常。如您所见，我必须减小图标的大小，否则会太大。

一些注意事项：

复合不会同时包含帮助图标和字段。它只是包装帮助图标。这有一个缺点，你需要三个列布局，并且帮助图标未显示在旁边场。相反，它显示在自己的列中。不是我想要的。
帮助文本在属性中传达。这有一个缺点它不能包含任何 HTML 标记，无论目的地 <p:panel> 会很乐意接受 HTML 标记。
您可以使用 show 属性省略帮助图标，但是 - 因为三列布局 - <customC:fieldhelp> 总是每个字段都需要存在。这很笨拙，但又是一个结果我缺乏知识。 :-(

如果有人比我自己了解更多 JSF/PrimeFaces，我相信它可以得到改进。

编辑

如果您希望图标位于输入字段旁边（而不是在其自己的列中），那么您需要<h:panelGroup> 标记。您可以在此标记中包装一组元素，<p:panelGrid>（或其兄弟：<h:panelGrid>）然后将其计为单个元素，即仅占用一个单元格。像这样的：

<h:form>
    <p:panelGrid columns="2" styleClass="noBorders">

        <p:outputLabel for="mydate" value="Date"  />
        <h:panelGroup>
            <p:calendar id="mydate"  pattern="yyyy/MM/dd" />
            <customC:fieldhelp helptext="Help text for date field." show="true" />
        </h:panelGroup>

        <p:outputLabel for="myboolean" value="Send now ?" />
        <h:panelGroup>
            <p:selectBooleanCheckbox id="myboolean" />
            <customC:fieldhelp helptext="Help text for boolean field." show="false"/>
        </h:panelGroup>

        <p:outputLabel for="mypwd" value="Your password" />
        <h:panelGroup>
            <p:password id="mypwd" size="30" />
            <customC:fieldhelp helptext="Help text for password field." show="true"/>
        </h:panelGroup>

    </p:panelGrid>
</h:form>

此外，我还必须对 vertical-align: middle 进行一些 CSS 调整，以使图标与其余部分垂直对齐。

【讨论】：

如果您觉得每个字段的问题图标使屏幕混乱，您可以考虑：stackoverflow.com/questions/13194963/…