Suppose you have the following anchor tag.



<pre class="brush: xml">
 &lt;a id="tipid" href="#" title="Using id">Click here&lt;/a> 
 
 &lt;!-- or -->

 &lt;a class="tipclass" href="#" title="Using class">Click here&lt;/a> 
 
 
</pre>



To apply Tiptip to the above anchors, insert the following code in your page preferably just above &lt;/head>. Tiptip uses 

title tag just like PrimeFaces do. It uses id and/or class attributes to identify the tag. class attribute when used applies to all tags (with title attributes) of the same class in the page.




<pre class="brush: js">

&lt;script type="text/javascript" 
 src="./tip/jquery.tipTip.minified.js" /> 
&lt;link rel="stylesheet" type="text/css" href="./tip/tipTip.css" />

&lt;script type="text/javascript"> 
 jQuery(document).ready(function() {
 jQuery('#tipid, .tipclass').tipTip({defaultPosition:"right"}); 
 });
&lt;/script>
 
</pre>



The above assumes that you have downloaded Tiptip to ./tip. Also notice that we use the JQuery that is bundled with 

PrimeFaces. PrimeFaces use "jQuery" in place of "$" for function calls. Tooltip can be positioned top,bottom,left or right. It can be restyled by editing the downloaded tipTip.css. 

Visit the the Tiptip download site to learn more about options available. 


Shown below is how tiptip is used in this page.



<pre class="brush: js">
 &lt;script type="text/javascript">
 jQuery(document).ready(function() {
 jQuery('.news_link').tipTip({defaultPosition:"top",
 delay:100,maxWidth:"275px",edgeOffset:4});
 });
&lt;/script>

</pre>



<pre class="brush: xml">
 &lt;h:commandButton styleClass="news_link" 
 title="Share to your wall"
 image="./images/bff.png" 
 action="#{howtoBlogsBean.facebookDialog}" />
 
</pre>



Good luck.

Using Tiptip a JQuery tooltip plugin in PrimeFaces project for standard HTML tags