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

    z-index problem of toolTip inside table OR panel

    jsfgeeks

      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

        • 1. Re: z-index problem of toolTip inside table OR panel
          ilya_shaikovsky
          please show the code.
          • 2. Re: z-index problem of toolTip inside table OR panel
            jsfgeeks

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

                Thanks ilya,

                 

                     I will try it.

                 

                Thanks again,

                JSF GEEKS

                • 5. Re: z-index problem of toolTip inside table OR panel
                  jsfgeeks

                  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