[richfaces-svn-commits] JBoss Rich Faces SVN: r14553 - branches/community/3.3.X/docs/photo_album_app_guide/en/src/main/docbook/includes.

[richfaces-svn-commits at lists.jboss.org]

Author: msorokin
Date: 2009-06-08 10:18:56 -0400 (Mon, 08 Jun 2009)
New Revision: 14553

Modified:
   branches/community/3.3.X/docs/photo_album_app_guide/en/src/main/docbook/includes/tooltips.xml
Log:
https://jira.jboss.org/jira/browse/RF-5768
TooTip section

Modified: branches/community/3.3.X/docs/photo_album_app_guide/en/src/main/docbook/includes/tooltips.xml
===================================================================
--- branches/community/3.3.X/docs/photo_album_app_guide/en/src/main/docbook/includes/tooltips.xml	2009-06-08 13:44:15 UTC (rev 14552)
+++ branches/community/3.3.X/docs/photo_album_app_guide/en/src/main/docbook/includes/tooltips.xml	2009-06-08 14:18:56 UTC (rev 14553)
@@ -1,7 +1,72 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <section id="tooltips">
-	<title>ToolTips</title>
+	<title>ToolTips TBR</title>
 	<para>
-		Work in progress...
+		When using RichFaces components library you&apos;ve got nealy everything to build UI, making a tooltip is not an exception. RichFaces provides a separate component to make a bubble appeare when the user hovers a UI element or layout area. 
+		The component is <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis>.
+		There's nothing complicated in using  <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis>: you just need to set the text to be shown in the tooltip with the <emphasis><property>&quot;value&quot;</property></emphasis> attribute and specify for which component you want the tooltip to be shown with the <emphasis><property>&quot;for&quot;</property></emphasis> attribute that takes the id of the targeted component as a parameter.
 	</para>
+	
+	<programlisting role="XML"><![CDATA[...
+<rich:panel id="panelId">
+<p>Element which has a tooltip</p>
+</rich:panel>
+<rich:toolTip value="This is a tooltip." for="panelId"/>
+...]]></programlisting> 
+	
+	<para>
+	Alternatively, you can just place <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis>	as a nested element of container for which the tooltip is shown. 
+	
+	</para>
+	
+	
+	<programlisting role="XML"><![CDATA[...
+<div>
+<p>Element which has a tooltip</p>
+
+<rich:toolTip>
+<p>Tooltip text</p>
+</rich:toolTip>
+</div>
+...]]></programlisting> 
+	<para>This approach was adopted in the Photo Alum to display tooltips for </para>
+	
+	<para>
+		This code outputs an album&apos;s image.
+	</para>
+	
+	<programlisting role="XML"><![CDATA[...
+<a4j:mediaOutput id="img" element="img" styleClass="main-image"
+	createContent="#{imageLoader.paintImage}" style="border : 3px solid #808080;"
+	value="#{fileManager.transformPath(model.selectedImage.fullPath, '_medium')}">
+
+</rich:dragSupport>
+	<rich:toolTip followMouse="true" direction="top-right"
+		showDelay="500" styleClass="tooltip" rendered="#{model.selectedImage.showMetaInfo}">
+		<span style="white-space:nowrap; display:block; text-align:left;">
+			<h:outputText value="Size in bytes: #{model.selectedImage.size}" />
+			<br />
+			<h:outputText
+				value="#{messages['original_size']}: #{model.selectedImage.height}x#{model.selectedImage.width}" />
+			<br />
+			<h:outputText value="Captured at: #{model.selectedImage.created}" />
+			<br />
+			<h:outputText
+				value="#{messages['camera']}: #{model.selectedImage.cameraModel}" />
+		</span>
+	</rich:toolTip>
+</a4j:mediaOutput>
+...]]></programlisting> 
+	
+	<para>The <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> is nested in <emphasis role="bold"><property>&lt;a4j:mediaOutput&gt;</property></emphasis> 
+and prints the size of the image, size in pixels, when the picture was taken and the type of  camera used to take the picture.
+	</para>
+	<figure>
+		<title>Tooltip</title>
+		<mediaobject>
+			<imageobject>
+				<imagedata fileref="images/tooltip.png"/>
+			</imageobject>
+		</mediaobject>
+	</figure>
 </section>