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

    Display tooltip for rows in dataTable

    arthur187
    arthur187 Jun 18, 2012 11:34 AM

      Hello,

      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="#..."
                                    var="car"
                                    id="table"
                                    rows="20"
                                    rowClasses="odd-row, even-row"
                                    styleClass="stable">
                        <rich:column>
                            <f:facet name="header">
                                <h:outputText value="License plate " />
                            </f:facet>
                            <h:outputText value="#{car.licensePlate}" />
                        </rich:column>
                        <rich:column>
                            ...
                        //more columns
                    </rich:dataTable>
                </h:form>
               ...
               // 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"
                             query="jQuery(this).removeClass('active-row')"/>
      • 10687 Views
      • Tags:
        • 1. Re: Display tooltip for rows in dataTable
          sivaprasad9394
          sivaprasad9394 Jun 19, 2012 12:56 AM (in response to arthur187)

          https://community.jboss.org/message/52271

          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......

          http://livedemo.exadel.com/richfaces-demo/richfaces/toolTip.jsf?tab=table

          1 of 1 people found this helpful
            • Actions
          • 2. Re: Display tooltip for rows in dataTable
            arthur187
            arthur187 Jun 19, 2012 9:00 AM (in response to sivaprasad9394)

            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.

              • Actions
            • 3. Re: Display tooltip for rows in dataTable
              sivaprasad9394
              sivaprasad9394 Jun 20, 2012 1:19 AM (in response to arthur187)

              Hi,

              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"/>

                                                  </s:link>

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

              </rich:column>

               

               

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

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

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

                                                  </h:outputText>

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

                                              </rich:column>

               

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

                • Actions