Question

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

Example of what I want

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

理由：小图标明显表明有很多帮助。你甚至可以看到帮助确实可用，甚至没有将鼠标指针移动到该字段。给用户这种温暖的模糊感。

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

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

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

Answer 1

所以这就是我在PrimeFaces中提出的：

My example

（我的screencapture没有显示鼠标指针）

我几乎采用了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调整，以使图标与其余图标垂直对齐。

使用工具提示按钮输入主要面

1 个答案:

修改