<?xml version="1.0" encoding="UTF-8"?>
<section id="tooltips">
	<title>ToolTips </title>
	<para>
		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 appeared 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>
