topbar-menu and using <p:commandLink instead <a href="#">

[vished]

Hi all,

I would like to use <p:commandLink instead <a href="#">. I would like to add <p:tooltip to my <p:commandLink .

How can I change this?

Code: Select all

			<li><a href="#"> <i
					class="topbar-icon material-icons animated swing fa fa-fw fa-bell-o"></i>
					<h:outputText id="notificationTopbar"
						value="#{numberOfUnreadNotificationByEmployeeNotLazyController.numberOf}"
						rendered="#{numberOfUnreadNotificationByEmployeeNotLazyController.numberOf != 0}"
						styleClass="topbar-badge animated rubberBand" /> <h:outputText
						value="Benachrichtungen" styleClass="topbar-item-name" />
			</a>

				<ul class="animated">
					<li role="menuitem"><a href="#" class="topbar-message"> <h:outputText
								styleClass="shorten-long-text"
								value="Keine Benachrichtungen vorhanden" rendered="#{numberOfUnreadNotificationByEmployeeNotLazyController.numberOf == 0}"/>
					</a></li>
				</ul> </li>

[mert.sincan]

Please try;

Code: Select all

<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pa="http://primefaces.org/morpheus"
    xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
...

<p:tooltip position="bottom"/>

...
          <li>
                <p:commandLink pt:data-tooltip="Tooltip for a link">
                    <i class="topbar-icon fa fa-fw fa-dot-circle-o"></i>
                    <span class="topbar-badge animated rubberBand">4</span>
                    <span class="topbar-item-name">Settings</span>
                </p:commandLink>
                <ul class="animated">
                ...
          </li>
 ...

OR

Code: Select all

...

<p:tooltip position="bottom"/>

...
          <li>
                <a href="#" data-tooltip="Tooltip for a link">
                    <i class="topbar-icon fa fa-fw fa-dot-circle-o"></i>
                    <span class="topbar-badge animated rubberBand">4</span>
                    <span class="topbar-item-name">Settings</span>
                </a>
                <ul class="animated">
                ...
          </li>
 ...

Also, you can use Pass-through elements feature of JSF2.2; https://docs.oracle.com/javaee/7/tutori ... ets009.htm
Exp;
xmlns:jsf="http://xmlns.jcp.org/jsf"

<a jsf:actionListener="#{...}" ... />

[vished]

Thank you.
But I got for pt:data-tooltip

pt:data-tooltip

Any ideas? Is there anything missing (.lib, jar...)

[vished]

But this is working also:

Code: Select all

	<p:commandLink id="test">
                    <i class="topbar-icon fa fa-fw fa-dot-circle-o"></i>
                    	<h:outputText id="notificationTopbar"
						value="#{numberOfUnreadNotificationByEmployeeNotLazyController.numberOf}"
						rendered="#{numberOfUnreadNotificationByEmployeeNotLazyController.numberOf != 0}"
						styleClass="topbar-badge animated rubberBand" /> <h:outputText
						value="Benachrichtungen" styleClass="topbar-item-name" />
                </p:commandLink>
                <p:tooltip for="test" value="Hallo" position="bottom"/>

[mert.sincan]

please add xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" for pt:data-tooltip into ui:composition