Uploaded image for project: 'RichFaces'
  1. RichFaces
  2. RF-14027

tooltip doesn't work with popupPanel (4.5.x).

    Details

    • Steps to Reproduce:
      Hide

      Create simple-app from maven-archetype:

      mvn archetype:generate -DarchetypeGroupId=org.richfaces.archetypes -DarchetypeArtifactId=richfaces-archetype-simpleapp -DarchetypeVersion=4.5.4.Final -DgroupId=org.docs.richfaces -DartifactId=tooltip
      

      then change index.xhtml content to something like this (i've mixed code from showcase):

      index.xhtml
      <h:form prependId="false">
      	<h:commandButton value="Call the popup">
      		<rich:componentControl target="popup" operation="show" />
      	</h:commandButton>
      	<rich:popupPanel id="popup" modal="false" autosized="true"
      		resizeable="false">
      		<f:facet name="header">
      			<h:outputText value="Simple popup panel" />
      		</f:facet>
      		<f:facet name="controls">
      			<h:outputLink value="#" onclick="#{rich:component('popup')}.hide(); return false;">X</h:outputLink>
      		</f:facet>
      		<rich:panel id="sample1" styleClass="tooltip-text">
      			<p>Can you see a tooltip?? Naaat!</p>
      			<rich:tooltip id="tt1" layout="block">
      				<span style="white-space: nowrap">I'm invisible!</span>
      			</rich:tooltip>
      		</rich:panel>
      	</rich:popupPanel>
      </h:form>
      
      Show
      Create simple-app from maven-archetype: mvn archetype:generate -DarchetypeGroupId=org.richfaces.archetypes -DarchetypeArtifactId=richfaces-archetype-simpleapp -DarchetypeVersion=4.5.4.Final -DgroupId=org.docs.richfaces -DartifactId=tooltip then change index.xhtml content to something like this (i've mixed code from showcase): index.xhtml <h:form prependId= "false" > <h:commandButton value= "Call the popup" > <rich:componentControl target= "popup" operation= "show" /> </h:commandButton> <rich:popupPanel id= "popup" modal= "false" autosized= "true" resizeable= "false" > <f:facet name= "header" > <h:outputText value= "Simple popup panel" /> </f:facet> <f:facet name= "controls" > <h:outputLink value= "#" onclick= "#{rich:component( 'popup' )}.hide(); return false;" > X </h:outputLink> </f:facet> <rich:panel id= "sample1" styleClass= "tooltip-text" > <p> Can you see a tooltip?? Naaat! </p> <rich:tooltip id= "tt1" layout= "block" > <span style= "white-space: nowrap" > I'm invisible! </span> </rich:tooltip> </rich:panel> </rich:popupPanel> </h:form>
    • Workaround:
      Workaround Exists
    • Workaround Description:
      Hide

      CSS rule can be added:

      tooltip.css
      .rf-tt {z-index: 101 !important}
      
      Show
      CSS rule can be added: tooltip.css .rf-tt { z-index : 101 !important }

      Description

      I'm in the middle of migration from 4.3.4 to 4.5.4 and all tooltips in my app doesn't work. I've been searching for explanation for a while and I found one.

      In 4.5.4 rich:tooltip has z-index set to 3 (really don't know why, in 4.3.4 it was 1000) and rich:popupPanel has z-index 100. So tooltips are rendered properly when they are in rich:popupPanel, but I can see them because of this. In rendered HTML z-index is added to div as style="z-index: 3".

      It probably effects all 4.5.x versions, but I didn't check it.

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Assignee:
                  michpetrov Michal Petrov
                  Reporter:
                  emkas Emil S
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  3 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved: