1 Reply Latest reply on Jul 4, 2013 2:06 AM by Brian Leathem

    Tooltip overlay issue

    Jaya S Newbie

      I am working on RF4.3.2 and having an issue with tooltip. I have two calendar components and need to show error message in a tooltip if the fields are empty. The issue is if both the components are empty, tooltips are getting overlaid. My code is as below.

       

      <h:panelGrid id="coursePeriodPanel" columns="10">

      <h:outputLabel value="#{msg.coursePeriod}" style="margin-left:22px;" />

      <rich:calendar id="fromCoursePeriod" datePattern="#{msg.datePattern}"

         enableManualInput="true" inputStyle="width:74px;

         #{not component.valid ? 'border-color:red;' : 'border-color:none;'};"

         value="#{courseBean.course.fromDate}" required="true" requiredMessage="Please Enter the From Date">

      </rich:calendar>

      <rich:tooltip id="fromCoursePeriodTooltip" followMouse="false"

           horizontalOffset="5" verticalOffset="5" style="display:table-cell"

           layout="block" mode="client" rendered="#{courseBean.hasMessages('createCourse:fromCoursePeriod')}">

           <span style="white-space: nowrap"> <rich:message for="fromCoursePeriod" style="color:red" /> </span>

      </rich:tooltip>

      <rich:calendar id="toCoursePeriod" datePattern="#{msg.datePattern}"

           enableManualInput="true" required="true"

           requiredMessage="Please Enter the To Date" inputStyle="width:74px; 

           #{not component.valid ? 'border-color:red;' : 'border-color:none;'};"

           value="#{courseBean.course.toDate}" binding="#{toCoursePeriod}">

      <f:validateRequired for="toCoursePeriod" />

      </rich:calendar>

      <rich:tooltip id="toCoursePeriodTooltip" followMouse="false"

          verticalOffset="5" style="display:table-cell" showDelay="1000"

          layout="block" mode="client" rendered="#{courseBean.hasMessages('createCourse:toCoursePeriod')}">

          <span style="white-space: nowrap"> <rich:message for="toCoursePeriod" style="color:red" /> </span>

      </rich:tooltip>

      <h:panelGrid>

       

      Please suggest how to fix this issue.

       

      Any suggestions are appreciated.

      Thanks.