8:50 p.m.
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">