5 Replies Latest reply on Jan 30, 2010 3:45 AM by jsf geeks

    z-index problem of toolTip inside table OR panel

    jsf geeks Master

      Hi,

       

           I am using toolTip component inside table and/or panel, but it seems that there is a z-index problem of tooltip arise inside table and/or panel. Even I tried to set width of toolTip by style="width: 500px", it reduces the width of toolTip as I desired, but the content inside the toolTip remains in one line and it goes behind the table. I am using richfaces V3.3.2 SR1.

       

      Any help will be appreciated,

      JSF GEEKS

        • 2. Re: z-index problem of toolTip inside table OR panel
          jsf geeks Master

          My JSP code is something like below,

           

          <rich:extendedDataTable id="extdtable_search_result" var="row"
                                                                                      binding="#{car_bean.extdtable_search_result}"
                                                                                      value="#{car_bean.cars_arraylist}"
                                                                                      style="left: 15px; top: 315px; position: absolute"
                                                                                      onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
                                                                                      onRowMouseOut="this.style.backgroundColor='#FFFFFF'"
                                                                                      width="700px" height="300px"
                                                                                      enableContextMenu="false" rendered="#{car_bean.render_search_result_table}"
                                                                                      rowKeyVar="rkv" noDataLabel="No car(s) found in selected criteria" rows="0">
                                                                  <f:facet name="header">
                                                                      <h:outputText value="#{car['search.searchresult']}"
                                                                                    title=" #{car['search.searchresult']}  "
                                                                                    style="font-size: 14px"/>
                                                                  </f:facet>
                                                                  <rich:column id="col_car_search_select" width="70" style="text-align: center">
                                                                      <f:facet name="header">
                                                                          <h:outputText id="outtxt_col_car_search_sel_header" value="#{car['cr.sel']}"
                                                                                        style="font-size: 13px"/>
                                                                      </f:facet>
                                                                      <h:selectBooleanCheckbox id="cb_search_car_sel"
                                                                                               binding="#{car_bean.cb_search_car_sel}">
                                                                          <a4j:support event="onclick" action="#{car_bean.value_change_sel_car_to_add}"/>
                                                                      </h:selectBooleanCheckbox>
                                                                  </rich:column>
                                                                  <rich:column id="col_searched_car_name" width="510">
                                                                      <f:facet name="header">
                                                                          <h:outputText id="outtxt_col_searched_car_name_header" value="#{car['carview.car']}"
                                                                                        style="font-size: 13px"/>
                                                                      </f:facet>
                                                                      <h:outputText id="cb_search_car_text" value="#{row.car_text}"
                                                                                    style="font-size: 13px" title=" #{row.car_text} "/>
                                                                      <rich:toolTip direction="top-right" value="#{row.car_text}"
                                                                                    horizontalOffset="2" verticalOffset="2"
                                                                                    rendered="true" zorder="2000"
                                                                                    followMouse="true" for="col_searched_car_name"/>
                                                                  </rich:column>
                                                                  <rich:column id="col_searched_car_type" width="100">
                                                                      <f:facet name="header">
                                                                          <h:outputText id="outtxt_col_searched_car_type_header" value="#{car['cr.cartype']}"
                                                                                        style="font-size: 13px"/>
                                                                      </f:facet>
                                                                      <h:outputText id="cb_searched_car_type" value="#{row.car_type}"
                                                                                    style="font-size: 13px"/>
                                                                  </rich:column>
                                                              </rich:extendedDataTable>

           

          The above is my JSP code in which I am using toolTip inside the extendedDataTable. The column, in which I declared toolTip, has long data (sometimes). But when the data is too large then the tip hides behing the table. Even I tried to set the width of toolTip by style attribute, but the line/text never breaks.

           

          Now, if anything you want then let me know.

           

          Thanks for your support and time,

          JSF GEEKS

          • 3. Re: z-index problem of toolTip inside table OR panel
            Ilya Shaikovsky Master
            The only solution is to move tooltip outside of the table and call it with client side api like there http://in.relation.to/13919.lace.  The only problem that it's not supports macrosubstitutions so value should be placed to tooltip before showing via custom js(get the span by class or id and add text from iteration variable).
            • 4. Re: z-index problem of toolTip inside table OR panel
              jsf geeks Master

              Thanks ilya,

               

                   I will try it.

               

              Thanks again,

              JSF GEEKS

              • 5. Re: z-index problem of toolTip inside table OR panel
                jsf geeks Master

                Hi ilya,

                 

                      I tried the alternative, which you have provided.

                 

                      (1) It gives error in

                 

                              <script type="javascript">
                                #{rich:component('calendar')}.
                customExpand=customExpand;    // Error : #{...} not allowed in a template text body.
                           
                </script>

                 

                      I replaces with $, then the problem is like following,

                 

                     (2) js error like below,

                 

                              Object doesn't support this property or method. This is error is at run-time in browser ( IE-7 ).

                 

                      Afterwards, I checked that, it is not calling the customExpand function. Let me mention that, I have put the whole .js in the same jsp page.

                 

                     Can you help me some more ?

                 

                Thanks you for your support,

                JSF GEEKS