验证失败时，页面底部的primefaces工具提示呈现

Question

我正在尝试学习JSF，我使用PrimeFaces，jQuery和普通的旧HTML，CSS和JS创建了一个简单的表单

以下是我的JSF页面：

<h:body>
    <div class="test-form">
        <div class="test-body">

            <h:form id="testForm">
                <div class="row" style="height: 10px;"></div>

                <div class="form-group has-feedback">
                    <p:inputText id="firstName" value="#{testController.firstName}" required="true"
                                 placeholder="First Name" styleClass="form-control">
                    </p:inputText>
                    <p:tooltip for="firstName" position="top" hideEffect="fade" showEffect="fade" >
                        <p:message for="firstName" />
                    </p:tooltip>
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>

                <div class="form-group has-feedback">
                    <p:inputText id="lastName" value="#{testController.lastName}" required="true"
                                 placeholder="Last Name" styleClass="form-control">
                    </p:inputText>
                    <span class="glyphicon glyphicon-user form-control-feedback"></span>
                </div>

                <div class="form-group has-feedback">
                    <p:inputText type="email" id="emailAddress" value="#{testController.email}" required="true"
                                 placeholder="Email" styleClass="form-control">
                    </p:inputText>
                    <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                </div>

                <div class="form-group has-feedback">
                    <p:password id="password1" styleClass="form-control" value="#{testController.password}"
                                required="true" placeholder="Password" match="password2">
                    </p:password>
                    <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>

                <div class="form-group has-feedback">
                    <p:password id="password2" styleClass="form-control"
                                value="#{testController.passwordReType}"
                                required="true" placeholder="Retype password">
                    </p:password>
                    <span class="glyphicon glyphicon-log-in form-control-feedback"></span>
                </div>

                <div class="row">
                    <div class="col-xs-4">
                        <p:commandButton style="padding: 0.3em;" value="Test"
                                         class="btn btn-primary btn-block btn-flat"
                                         update="testForm"
                                         action="#{testController.test}"/>
                    </div>
                </div>

            </h:form>

        </div>
    </div>

    <script src="resources/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="resources/bootstrap/js/bootstrap.min.js"></script>
</h:body>

我尝试在线查看“similar title”，即使标题可能与此问题相同，但答案对我没用。

我附上了一张图片，当我按下“注册”按钮并显示空名字并将鼠标悬停在输入栏上时，错误工具提示会显示在页面底部