5 Replies Latest reply on Jul 8, 2009 1:45 AM by gkiesel

    rich:tooltip not showing in IE

    gkiesel

      Hello there,

      using richfaces 3.1.6. I have the following code (multiple times) in my pages:

      <a4j:region renderRegionOnly="true">
       <h:graphicImage value="img/hilfe.gif" alt="#{label.alHilfe}" id="buTTUnfallPlus">
       <rich:toolTip mode="ajax" direction="top-left" styleClass="tooltip" verticalOffset="0" horizontalOffset="-20">
       <f:facet name="defaultContent">
       <h:outputText value="#{help.alTTLadeHilfe}" />
       </f:facet>
       <h:outputText value="#{help.buTTUnfallPlus}" escape="false" />
       </rich:toolTip>
       </h:graphicImage>
      </a4j:region>
      


      Using Internet Explorer 7.0.6 this usually us rendered as:
      <!-- h:styles>
       /org/richfaces/renderkit/html/css/tooltip.xcss
       </h:styles>
       <h:scripts>
       new org.ajax4jsf.framework.resource.PrototypeScript(),
       new org.ajax4jsf.framework.ajax.AjaxScript(),
       /org/richfaces/renderkit/html/scripts/utils.js,
       /org/richfaces/renderkit/html/scripts/tooltip.js
       </h:scripts--><span class="dr-rich-tool-tip rich-tool-tip tooltip" id="form:_idJsp213" style="position: absolute; display : none;z-index:99; "><span id="form:_idJsp213defaultContent" style="display:none">Hilfe wird geladen.</span><span id="form:_idJsp213content"></span><span id="form:_idJsp213script" style="display:none"><script type="text/javascript" id ="scriptform:_idJsp213">
      new ToolTip({'delay':0,'oncomplete':'','hideDelay':0,'event':'mouseover','onhide':'','onshow':''} ,"form:_idJsp213","form:buTTUnfallPlus","ajax",false,"top-left",false,-20,0,"A4J.AJAX.Submit('form:_idJsp212','form',event,ajaxOptions)",{'parameters':{'form:_idJsp213':'form:_idJsp213'} ,'actionUrl':'/TarifrechnerKfzWeb/beitragsuebersicht.faces?javax.portlet.faces.DirectLink=true','oncomplete':function(request,event,data){;{var _toolTip = $('form:_idJsp213').component;_toolTip.toolTipContent = $('form:_idJsp213content');_toolTip.displayDiv();}},'control':this,'onbeforedomupdate':function(request,event,data){;{ var _toolTip = $('form:_idJsp213').component;_toolTip.toolTip.style.display = 'none'; }}} );;
      
      </script></span></span><!-- f:call name="utils.encodeEndFormIfNessesary"/--><img id="form:buTTUnfallPlus" src="img/hilfe.gif" alt="Hilfe" />
      


      then everything is fine.

      However sometimes it is rendered as:

      <!-- h:styles>
       /org/richfaces/renderkit/html/css/tooltip.xcss
       </h:styles>
       <h:scripts>
       new org.ajax4jsf.framework.resource.PrototypeScript(),
       new org.ajax4jsf.framework.ajax.AjaxScript(),
       /org/richfaces/renderkit/html/scripts/utils.js,
       /org/richfaces/renderkit/html/scripts/tooltip.js
       </h:scripts--><span class="dr-rich-tool-tip rich-tool-tip tooltip" id="form:_idJsp213" style="position: absolute; display : none;z-index:99; "><span id="form:_idJsp213defaultContent" style="display:none">Hilfe wird geladen.</span><span id="form:_idJsp213content"></span><span id="form:_idJsp213script" style="display:none"><script type="text/javascript" id ="scriptform:_idJsp213">
      new ToolTip({'onhide':'','hideDelay':0,'event':'mouseover','oncomplete':'','delay':0,'onshow':''} ,"form:_idJsp213","form:buTTUnfallPlus","ajax",false,"top-left",false,-20,0,"A4J.AJAX.Submit('form:_idJsp212','form',event,ajaxOptions)",{'parameters':{'form:_idJsp213':'form:_idJsp213'} ,'actionUrl':'/TarifrechnerKfzWeb/beitragsuebersicht.faces?javax.portlet.faces.DirectLink=true','oncomplete':function(request,event,data){;{var _toolTip = $('form:_idJsp213').component;_toolTip.toolTipContent = $('form:_idJsp213content');_toolTip.displayDiv();}},'control':this,'onbeforedomupdate':function(request,event,data){;{ var _toolTip = $('form:_idJsp213').component;_toolTip.toolTip.style.display = 'none'; }}} );;
      
      </script></span></span><!-- f:call name="utils.encodeEndFormIfNessesary"/--><img id="form:buTTUnfallPlus" src="img/hilfe.gif" alt="Hilfe" />
      


      in which case the tooltip will not work (nothing happens onMouseOver).

      Loading a page a 2nd time usally fixes the issue. In Firefox I have never seen this behaviour. Changing the mode to client did not make a difference.

      Is this a known bug (maybe already fixed in the current version)? Or am I doing something wrong?

      Regards,
      Gunnar

        • 1. Re: rich:tooltip not showing in IE
          ilya_shaikovsky

          please execute the

          javascript:alert(Prototype.version);


          on the page where it is not working.

          • 2. Re: rich:tooltip not showing in IE
            nbelaevski

            Should be

            javascript:alert(Prototype.Version);


            • 3. Re: rich:tooltip not showing in IE

              Hi, I've had this problem and to fix it I moved the tooltip declaration outside of the item it pertains to (h:graphicImage in your case). For example your code would become something like

              <a4j:region renderRegionOnly="true">
               <h:graphicImage value="img/hilfe.gif" alt="#{label.alHilfe}" id="buTTUnfallPlus"/>
               <rich:toolTip for="buTTUnfallPlus" mode="ajax" direction="top-left" styleClass="tooltip" verticalOffset="0" horizontalOffset="-20">
               <f:facet name="defaultContent">
               <h:outputText value="#{help.alTTLadeHilfe}" />
               </f:facet>
               <h:outputText value="#{help.buTTUnfallPlus}" escape="false" />
               </rich:toolTip>
              </a4j:region>


              • 4. Re: rich:tooltip not showing in IE
                gkiesel

                Hello,

                thank you for your answers.

                Unfortunatly the solution suggested by David is not working for me since the 'for' attribute is not availble in v3.1.6 (and currently we can not change to a higher version). So to have the connection between image and tooltip I need to place the tooltip tag inside the image tag.

                The used Prototypeversion is 1.6.0.

                Does anyone have a another possible solution/workaround?

                • 5. Re: rich:tooltip not showing in IE
                  gkiesel

                  After moving to a new Server-Version and using RF 3.3.1 the workaround suggested by David did the trick for us. Thanks!