Prime faces - message tooltip won't display

Question

I want to display error message as a tooltip like in this example: http://www.primefaces.org/showcase/ui/message/messages.xhtml

Here is my JSF code snippet:

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

Here is HTML output snippet for Login row:

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

There is clearly HTML code for the tooltip & inputs have the red outline, but tooltip message just won't show when I hover over the input box. My form is placed inside dialog window.

Primefaces 6.0.RC2

Do Nhu Vy Do Nhu Vy · Accepted Answer · 2016-04-30T02:35:42

You put this snippet inside <h:body>...</h:body> pair tags, and outside <h:form> ... </h:form> pair tags:

<p:tooltip />

This is source code just work (temporary, for sake of simplicity, I don't use bean with its properties, methods):

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

This is my screenshot:

Prime faces - message tooltip won't display

1 Answers