我想将错误消息显示为工具提示,如本例所示:http://www.primefaces.org/showcase/ui/message/messages.xhtml
这是我的 JSF 代码片段:
<h:form id="loginForm">
<p:messages id="messages" showDetail="true" closable="true" for="login"/>
<h:panelGrid columns="3" cellpadding="3" width="100%">
<p:outputLabel for="username" value="Login: "/>
<p:inputText style="width: 100%;" value="#{loginBean.username}" required="true" id="username"/>
<p:message for="username" display="tooltip"/>
<p:outputLabel for="password" value="Password:"/>
<p:password style="width: 100%;" value="#{loginBean.password}" required="true" id="password"/>
<p:message for="password" display="tooltip"/>
</h:panelGrid>
<p:commandButton value="OK" action="#{loginBean.login()}" update="loginForm" style="float: right; margin-top: 5px;"/>
</h:form>
这是登录行的 HTML 输出片段:
<tr>
<td><label id="loginForm:j_idt9" class="ui-outputlabel ui-widget ui-state-error" for="loginForm:username">Login: <span class="ui-outputlabel-rfi">*</span></label></td>
<td><input id="loginForm:username" name="loginForm:username" type="text" value="" style="width: 100%;" aria-required="true" class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all ui-state-error" role="textbox" aria-disabled="false" aria-readonly="false"></td>
<td><div id="loginForm:j_idt10" aria-live="polite" class="ui-message ui-helper-hidden ui-message-error ui-widget ui-corner-all"><span class="ui-message-error-icon"></span><span class="ui-message-error-detail">Login: Validation Error: Value is required.</span></div></td>
</tr>
工具提示和输入有明显的 HTML 代码,带有红色轮廓,但是当我将鼠标悬停在输入框上时,工具提示消息不会显示。我的表单被放置在对话窗口内。
Primefaces 6.0.RC2
最佳答案
你把这个片段放在 <h:body>...</h:body>
里面对标签和外部 <h:form> ... </h:form>
配对标签:
<p:tooltip />
这是源代码只是工作(临时的,为了简单起见,我不使用 bean 及其属性、方法):
<?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:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<p:tooltip />
<h:form id="loginForm">
<p:messages id="messages" showDetail="true" closable="true" for="login"/>
<h:panelGrid columns="3" cellpadding="3" width="100%">
<p:outputLabel for="username" value="Login: "/>
<p:inputText style="width: 100%;" required="true" id="username"/>
<p:message for="username" display="tooltip"/>
<p:outputLabel for="password" value="Password:"/>
<p:password style="width: 100%;" required="true" id="password"/>
<p:message for="password" display="tooltip"/>
</h:panelGrid>
<p:commandButton value="OK" update="loginForm" style="float: right; margin-top: 5px;"/>
</h:form>
</h:body>
</html>
这是我的截图:
关于jsf - 主要面孔 - 消息工具提示不会显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36947749/