3 Replies Latest reply on Sep 25, 2011 11:32 AM by ilya_shaikovsky

    Tooltip rendering behind scrollbars in scrollableDataTable

    mbeedub

      I've got a tooltip for each row in a scrollable data table.  Unfortunately it's not rendering correctly (it renders behind the scroll bars or the table if no scroll bars are present).

       

      I've tried some of the (css) workarounds suggested here but they don't seem to work.

       

      It does seem to be more of a CSS/overflow/z-index issue.

       

      Has any one managed to solve the problem.

       

      Thanks

       

      (RichFaces 3.3.2.SR1)

        • 1. Re: Tooltip rendering behind scrollbars in scrollableDataTable
          ilya_shaikovsky

          I was actually able to solve that but only using shared tooltip defined outside of the table.

           

          Something like that http://in.relation.to/Bloggers/RichFacesCalendarAndScrollableExtendedTables but for tooltip.

           

          Do not worry about JS overrides there. Tooltip will not require that changes. You could just use its API (show()) from the elements in table. But you will have another challenge. To update the content of the tooltip with some cell related infiormation you will need to use some custom JavaScript (pretty simple though) to manipulate directly with tooltip HTML. Because in case of putting outside - it will have no row data context.

           

          See sample:

          <h:form id="form">
          <rich:tooltip showEvent="none" id="tt">qweqwe qweqwe</rich:tooltip>
          <rich:dataTable value="#{carsBean.allInventoryItems}" var="car">
          <rich:column>
          <f:facet name="header">
          <h:outputText value="Vendor " />
          </f:facet>
          <h:outputLink value="#" id="ttout"
          onclick="$('.rf-tt-cnt').text('#{car.vendor}'); #{rich:component('tt')}.show(event); return false;">show simple</h:outputLink>
          </rich:column>
          

          so onclick I'm changing the content of the tooltip and manually showing it.

          1 of 1 people found this helpful
          • 2. Re: Tooltip rendering behind scrollbars in scrollableDataTable
            mbeedub

            Many thanks Ilya

             

            I'll take a look at that.  A pity it can't be solved by some simple CSS so I may just use extendeddatatable which has the same problem but this can be resolved with CSS:

             

            .extdt-outerdiv {

              overflow: visible !important;

            }

            • 3. Re: Tooltip rendering behind scrollbars in scrollableDataTable
              ilya_shaikovsky

              it's not our limitation unfortunatelly. Just relative positioning works in that way..