Search code examples
jsfprimefacesstylestooltip

How do I put line breaks in p:messages in a p:tooltip


I am trying to put a line break between list of rules a password filed is supposed to have:

Hope this code would help you reproduce it on your local machines

My JSF form looks like:

<h:form id="passwordForm">
     <div class="form-group has-feedback">
        <p:password id="password1" value="#{testBean.password}"
                    required="true"
                    requiredMessage="This field cannot be left empty"
                    placeholder="Password">
        </p:password>
        <p:tooltip for="password1"  id="password1ToolTip"
                   hideEvent="focus"
                   rendered="#{not empty facesContext.getMessageList('passwordForm:password1')}"
                   position="right" hideEffect="fade" showEffect="fade">
            <p:message for="password1"/>
        </p:tooltip>
    </div>
</h:form>

This is how my bean looks:

@Named
@RequestScoped
public class TestBean implements Serializable {

    private static final long serialVersionUID = 2016821444602021904L;


    @Pattern(regexp = "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}", 
    message = "Password should contain minimum 8 characters, 1 Uppercase alphabet, 1 lower case alphabet and 1 special character")
    @Size(min = 8, message = "Password cannot be this short!")
    private String password;

    public void setPassword(String password) {
        this.password = password;
    }

    public String getPassword() {
        return password;
    }

}

Based on a few answers on SO I have tried modifying the validation message by introducing special entity codes &#13; and [![&#10;][1]][1] as follows:

Password should contain&#13;Minimum 8 characters&#13;1 Uppercase alphabet&#13;&#10; 1 lower case alphabet and 1 special character

Note: This attached image might not show up in a few browsers This is how the the tooltip looks


Solution

  • Why you're showing the message in an extra tooltip? Looks a bit strange.

    Anyway, what you need is a <br/> where you want the line break and set escape="false" in your p:message.

    message:

    Password should contain&#13;Minimum 8 characters&#13;1 <br/> Uppercase Password...
    

    xhtml:

    <p:message for="password1" escape="false"/>
    

    UPDATE1:

    Thanks to Parkash Kumar for the additional info to improve the answer.

    UPDATE2:

    You could also use CSS and /n for a line break, then you need to apply:

    #messages td { white-space: pre; }
    

    to your CSS.