2 Replies Latest reply on Dec 3, 2007 10:43 AM by Alexey Shakov

    rich:toolTip in div with scrollbars

    Alexey Shakov Newbie

      Hi,

      My UIComponents are all placed in a scrollable div.

      I want to use rich:toolTip for one of this components.

      But: if the div is scrolled, then rich:toolTip is displayed with offset (equal to scroll position).

      Is there a possibility to avoid this behavior?

      Thanks in advance!

        • 1. Re: rich:toolTip in div with scrollbars
          Ilya Shaikovsky Master

          Works correct for me in 3.2.0 Snapshots.

          • 2. Re: rich:toolTip in div with scrollbars
            Alexey Shakov Newbie

            Sorry, it does not work with latest snapshot.

            Hier is an example (taken from exadel.com, the only defference is added div):


            <ui:composition xmlns="http://www.w3.org/1999/xhtml"
             xmlns:ui="http://java.sun.com/jsf/facelets"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:a4j="http://richfaces.org/a4j"
             xmlns:rich="http://richfaces.org/rich">
            
            
            
            
            
             <style>
            
             .tooltip {
            
             background-color:#{richSkin.generalBackgroundColor};
            
             border-width:3px;
            
             padding:10px;
            
             }
            
             .tooltip-text {
            
             width:350px;
            
             height:65px;
            
             cursor:arrow;
            
             border-width:2px;
            
             text-align:center;
            
             }
            
             .tooltipData {
            
             font-weight: bold;
            
             }
            
             </style>
            
             <div
             style="position: absolute; top: 200px; left: 200px; width: 400px; height: 400px; overflow: auto;">
            
            
             <h:panelGrid columns="2">
            
             <rich:panel id="sample1" styleClass="tooltip-text">
            
             <rich:toolTip>
            
             <span style="white-space: nowrap"> This tool-tip content was
             <strong>pre-rendered</strong> to the page.<br /> The look of this
             tool-tip is 100% defined by skin. </span>
            
             </rich:toolTip>
            
             <p>
            
             Here you can see
             <b>default client-side</b> tool-tip
            
             </p>
            
             </rich:panel>
            
             <rich:panel id="sample2" styleClass="tooltip-text">
            
             <rich:toolTip followMouse="true" direction="top-right" delay="500"
             styleClass="tooltip" style="width:250px">
            
             <span style="white-space: nowrap"> This tool-tip content
             also <strong>pre-rendered</strong> to the page.<br /> However,
             the look of this tool-tip is customized<br /> by styleClass
             attribute. </span>
            
             </rich:toolTip>
            
             <p>
            
             This tool-tip will
             <b>follow mouse</b>. Also this tool-tip has a
             <b>delay 0.5 sec</b>, so be patient!
            
             </p>
            
             </rich:panel>
            
             <h:form>
            
             <rich:panel id="sample3" styleClass="tooltip-text">
            
             <rich:toolTip direction="top-right" mode="ajax"
             styleClass="tooltip" layout="block">
            
             <f:facet name="defaultContent">
            
             <strong>Wait...</strong>
            
             </f:facet>
            
             <span style="white-space: nowrap">This tool-tip content was
             <strong>rendered on server</strong> </span>
            
             <h:panelGrid columns="2">
            
             <h:outputText style="white-space:nowrap"
             value="tooltips requested:" />
            
             <h:outputText value="#{toolTipData.tooltipCounter}"
             styleClass="tooltipData" />
            
             </h:panelGrid>
            
             </rich:toolTip>
            
             <p>
            
             This tool-tip rendered on server
             <b>in separate request</b>.
            
             </p>
            
             </rich:panel>
            
             </h:form>
            
             <h:form>
            
             <rich:panel id="sample4" styleClass="tooltip-text">
            
             <rich:toolTip event="onclick" direction="bottom-left" mode="ajax"
             styleClass="tooltip" layout="block">
            
             <f:facet name="defaultContent">
            
             <strong>Wait...</strong>
            
             </f:facet>
            
             <span style="white-space: nowrap">This tool-tip content was
             <strong>rendered on server</strong> <br /> </span>
            
             <h:panelGrid columns="2">
            
             <h:outputText style="white-space:nowrap"
             value="tooltips requested:" />
            
             <h:outputText value="#{toolTipData.tooltipCounter}"
             styleClass="tooltipData" />
            
             </h:panelGrid>
            
             </rich:toolTip>
            
             <p>
            
             This tool-tip will be
             <b>activated on mouse click</b>. It also has a
             <b>bottom-left</b> position.
            
             </p>
            
             </rich:panel>
            
             </h:form>
            
             </h:panelGrid>
            
            
             </div>
            
            
            </ui:composition>