rich:tooltip not showing in IE
gkiesel May 19, 2009 11:19 AMHello 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