Tooltip For buttons and Icons

[VH INFORMATICA LTDA]

I need to show equals tooltips for all icons and buttons ...

My Button... (I need to show all equal as this!)
<p:commandButton id="cmdBut" icon="fa fa-facebook"/>
<p:tooltip id="ttBut" for="cmdBut" value="Tooltip"/>

My icon...
<i class="fa fa-facebook" title="Tooltip"/>

[mert.sincan]

You can not use PrimeFaces Tooltip with html tags. When you add title attribute in a html tag, this tag is rendered by browser. Please try with h: or p: tags.
Also you can use global tooltip in your project;
//global tooltip
http://www.primefaces.org/showcase/ui/o ... obal.xhtml

//test code

Code: Select all

// please add in your page
..
xmlns:p="http://primefaces.org/ui"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
...

// test 
<p:tooltip />

<p:commandButton id="cmdBut" icon="fa fa-facebook" pt:data-tooltip="Tooltip 1"/>
<h:link class="fa fa-facebook" pt:data-tooltip="Tooltip 2"/>

[VH INFORMATICA LTDA]

Its works... but i need show tooltip only in icon, not in link...

Tanks.

[VH INFORMATICA LTDA]

<p:tooltip/>

<h:graphicImage pt:data-tooltip="#{msgs.tooltip}">
<i class="fa fa-plus Fs20"/>
</h:graphicImage>

[mert.sincan]

Sorry, I forgot globalSelector attribute in tooltip component. Please try with;

//CSS

Code: Select all

.TestClass:hover {
   cursor: pointer;
}

// XHTML

Code: Select all

<p:tooltip /> <!-- for pt: -->
<p:tooltip globalSelector=".TestClass" /> 

<i class="TestClass fa fa-plus Fs20" data-tooltip="Tooltip 2"/>
                                        
<p:commandButton id="cmdBut" icon="fa fa-facebook" style="margin-left:50px" pt:data-tooltip="Tooltip 1"/>

[VH INFORMATICA LTDA]

Tanks its work!

[mert.sincan]

Glad to hear, thanks