3 Replies Latest reply on Oct 17, 2013 11:41 AM by Sushant Saini

    rich:tooltip for html commandButton in richfaces 4

    Tun Naing Newbie

          <h:commandButton value="Save">

              <rich:componentControl operation="show" />

                  <rich:tooltip layout="block">

                      <span style="white-space: nowrap">Save my form</span>

                  </rich:tooltip>

          </h:commandButton>

       

      The tooltip for html commandButton doesn't work if I don't use componentContorl.

       

      Should I be able to use the tooltip without componentControl in richfaces 4 ?

        • 1. rich:tooltip for html commandButton in richfaces 4
          Nick Belaevski Master

          Hi Tun,

           

          Try wrapping h:commandButton & rich:tooltip into a4j:outputPanel.

          • 2. rich:tooltip for html commandButton in richfaces 4
            Tun Naing Newbie

            Thanks Nick, that works. I have to use tooltip either inside a4j:outputPanel or with componentControl.

            • 3. Re: rich:tooltip for html commandButton in richfaces 4
              Sushant Saini Novice

              Hi nick,

              I have just upgraded from richfaces 3.3.3 to 4.3.2. Though the tool tip shows up it does not fetch the data from server. here is the tooltip code.

               

              <a4j:outputPanel id="tooltippanel">

                          <h:graphicImage id="bldlocQuickPeek" url="images/preview.gif" rendered="#{not empty arr.locationName}" alt="Location Quick Peek"></h:graphicImage>

                <rich:tooltip  target="bldlocQuickPeek"  listener="#{buildingSearchBackBean.onLocationHover}"  mode="ajax"

                verticalOffset="-100" horizontalOffset="5">              

                               <div class="quickpeek-top"><h1> Location Quick Peek</h1></div>

                <div class="quickpeek-bg">

                               <table cellpadding="0" cellspacing="0">

                                 <tr>

                                  <td><h:outputLabel styleClass="qplabel" value="Address"/></td>

                                   <td><h:outputText styleClass="qpfield smalltext" value="#{buildingSearchBackBean.locQPAddress}"/></td>                  

                                 </tr>

                                 <tr>

                <td><div class="qpline"></div></td>

                <td><div class="qpline"></div></td>

                 </tr>

                                 <tr>

                                  <td><h:outputLabel styleClass="qplabel" value="City"/></td>

                                   <td><h:outputText styleClass="qpfield smalltext" value="#{buildingSearchBackBean.locQPCity}"/></td>                  

                                 </tr>

                                 <tr>

                <td><div class="qpline"></div></td>

                <td><div class="qpline"></div></td>

                 </tr>

                                 <tr>

                                  <td><h:outputLabel styleClass="qplabel" value="Field Office"/></td>

                                   <td><h:outputText styleClass="qpfield smalltext" value="#{buildingSearchBackBean.locQPFieldOffice}"/></td>                  

                                 </tr>

                                 <tr>

                <td><div class="qpline"></div></td>

                <td><div class="qpline"></div></td>

                 </tr>

                                 <tr>

                                  <td><h:outputLabel styleClass="qplabel" value="Occup Right"/></td>

                                   <td><h:outputText styleClass="qpfield smalltext" value="#{buildingSearchBackBean.locQPOccupRight}"/></td>                  

                                 </tr>

                                 <tr>

                <td><div class="qpline"></div></td>

                <td><div class="qpline"></div></td>

                 </tr>

                               </table>

                               </div>

                               <div class="quickpeek-bottom"></div>

                               <a4j:ajax event="mouseover" requestDelay="5000"></a4j:ajax>

                </rich:tooltip>

                </a4j:outputPanel>

               

               

              and here is the listener on the back on the server

               

              public void onLocationHover(ActionEvent e) {

                // getLogger().debug("inside hover event");

                BuildingSearchResultsDTO srt = (BuildingSearchResultsDTO) this.htmlDataTable

                .getRowData();

                // getLogger().debug("loc code = "+srt.getLocationCode());

                BldQuickPeekDTO bldQuickPeekDTO = this.getBuildingSearchBusinessDelegate()

                .getBldQuickPeek(srt.getLocationCode());

                setLocQPAddress(bldQuickPeekDTO.getAddress());

                setLocQPCity(bldQuickPeekDTO.getCity());

                setLocQPFieldOffice(bldQuickPeekDTO.getFieldOffice());

                setLocQPOccupRight(bldQuickPeekDTO.getOccupRight());

               

               

                }