Author: ishabalov Date: 2007-07-31 21:50:16 -0400 (Tue, 31 Jul 2007) New Revision: 1969 Modified: trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/tooltip/ToolTipData.java trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/usage.xhtml Log: Tooltip sample improved Modified: trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/tooltip/ToolTipData.java =================================================================== --- trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/tooltip/ToolTipData.java 2007-08-01 00:05:47 UTC (rev 1968) +++ trunk/samples/richfaces-demo/src/main/java/org/richfaces/demo/tooltip/ToolTipData.java 2007-08-01 01:50:16 UTC (rev 1969) @@ -9,7 +9,7 @@ private int currentVehicleIndex = -1; public int getTooltipCounter() { try { - Thread.sleep(1000); + Thread.sleep(500); } catch (InterruptedException e) { } return tooltipCounter++; Modified: trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/usage.xhtml =================================================================== --- trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/usage.xhtml 2007-08-01 00:05:47 UTC (rev 1968) +++ trunk/samples/richfaces-demo/src/main/webapp/richfaces/toolTip/usage.xhtml 2007-08-01 01:50:16 UTC (rev 1969) @@ -13,56 +13,88 @@ border-width:3px; padding:10px; } + .tooltip-text { + width:350px; + height:75px; + cursor:arrow; + border-width:2px; + text-align:center; + } .tooltipData { font-weight: bold; } </style> <p> - ToolTip is a little non-modal popup that may be used to display additional infrmation, that normally hidden. + ToolTip is a little non-modal pop-up that may be used to display additional information, that normally hidden.<br/> Major toolTip features: - (1) ToolTip content may be tether pre-rendered to the page, or requested from server in separate Ajax request - (2) </p> + <ul> + <li>Tool-tip content may be <b>pre-rendered</b> on page (client mode) or <b>loaded in separate Ajax request</b> (ajax mode)</li> + <li>In "ajax" mode <b>default content</b> may be shown while request is executed</li> + <li>Parameters can be passed to server during ajax reques</li> + <li>Tooltip <b>look is fully customizable</b> using both - Richfaces skins and CSS style classes</li> + </ul> + <div class="sample-container" > - <h:outputText id="tt1" value="Here you can see default client-side tooltip" > - <rich:toolTip direction="top-right"> + <h:panelGrid columns="2"> + <rich:panel id="sample1" styleClass="tooltip-text"> + <rich:toolTip> <span> - This tooltip content was <strong>pre-rendered</strong> to the page.<br/> - The look of this tooltip is 100% defined by skin. + 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> - </h:outputText> - </div> - <div class="sample-container" > - <h:outputText id="tt2" value="This tooltip will follow mouse" > - <rich:toolTip followMouse="true" direction="top-right" delay="1000" styleClass="tooltip" style="width:250px"> + <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> - This tooltip content also <strong>pre-rendered</strong> to the page. - The look of this tooltip defined by styleClass attribute. + This tool-tip content also <strong>pre-rendered</strong> to the page. + However, the look of this tool-tip is customized by styleClass attribute. </span> </rich:toolTip> - </h:outputText> - </div> - <div class="sample-container"> - <h:form> - <h:outputText value="This tooltip rendered on server in separate request" id="tt3"> - <rich:toolTip direction="top-right" mode="ajax" verticalOffset="5" zorder="200" styleClass="tooltip"> - <f:facet name="defaultContent"> - <strong>Wait...</strong> - </f:facet> - <span>This tooltip content was <strong>rendered</strong> on server </span> - <h:panelGrid columns="2"> - <h:outputText value="tooltips requested:" /> - <h:outputText value="#{toolTipData.tooltipCounter}" styleClass="tooltipData" /> - <h:outputText value="last request:" /> - <h:outputText value="#{toolTipData.tooltipDate}" styleClass="tooltipData" > - <f:convertDateTime pattern="mm:ss.SSS"/> - </h:outputText> - </h:panelGrid> - </rich:toolTip> - </h:outputText> - </h:form> + <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"> + <f:facet name="defaultContent"> + <strong>Wait...</strong> + </f:facet> + <span >This tool-tip content was <strong>rendered on server</strong> </span> + <h:panelGrid columns="2"> + <h:outputText 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"> + <f:facet name="defaultContent"> + <strong>Wait...</strong> + </f:facet> + <span >This tool-tip content was <strong>rendered on server</strong> </span> + <h:panelGrid columns="2"> + <h:outputText 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:define> <ui:define name="sources">