3 Replies Latest reply on Jun 20, 2012 1:19 AM by Siva P

    Display tooltip for rows in dataTable

    Arthur O Newbie


      I've got a dataTable with several columns which display certain values. On mouseover the appropriated row is highlighted, but I need to display a tooltip with further information (related to the appropriated row).

      I do understand how to add a rich:tooltip to a colomun, but I'd like to have a tooltip for the entire row. Could you help me, please?


      <h:form id="form">
                          <rich:dataTable value="#..."
                                          rowClasses="odd-row, even-row"
                                  <f:facet name="header">
                                      <h:outputText value="License plate " />
                                  <h:outputText value="#{car.licensePlate}" />
                              //more columns
                     // de-/highlighting the table rows
                       <rich:jQuery selector=".stable tr" event="mouseover"
                                   query="jQuery(this).addClass('active-row')" /> 
                      <rich:jQuery selector=".stable tr" event="mouseout"
        • 1. Re: Display tooltip for rows in dataTable
          Siva P Master


          For Example......

          <rich:toolTip id="resourceToolTip" direction="bottom-left" styleClass="hover-tip"
          mode="ajax" for="resourceTipTarget" layout="block" verticalOffset="#{myBean.screenY}">


          Please have a look on the below link for tool tip......


          1 of 1 people found this helpful
          • 2. Re: Display tooltip for rows in dataTable
            Arthur O Newbie

            Ok, thank you for the help. I have found the second link on tooltips on datatables already, but they only show the solution on columns. Do you have any good tutorials for the "for" operator? As I'm quiet new to this, I don't know how I should assign IDs to the tablerows.

            • 3. Re: Display tooltip for rows in dataTable
              Siva P Master


              You can't add tooltip for the row.I have given some example for your reference,


              <rich:column width="10%" style="text-align: center;">

                                                  <f:facet name="header">#{messages.Edit}</f:facet>

                                                  <s:link id="editPanel"

                                                      view="/pages/training/editTrainings.xhtml" action="#{trainingsHome.editTrainingsDetails()}" > 

                                                      <h:graphicImage value="/img/bosch/iconEdit.gif"  

                                                          style="border:0" alt="Edit"/>

                                                    <f:param name="trainingsTrainingid" value="#{training.trainingid}"/>

                                                    <f:param name="trainingEdit" value="Edit"/>


                                                  <rich:toolTip for="editPanel" value="#{messages.Edit}"




              <rich:column width="15%" style="text-align:center;">

                                                  <f:facet name="header">#{messages['Training.Frequency']}</f:facet>

                                                  <h:outputText id="YearID" value="#{training.freqperyear}">


                             <rich:toolTip for="YearID" value="Frequent Year"



              So in your datatable you can see some thing like "Frequent Year" tooltip.