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

Post Reply
vished
Posts: 240
Joined: 02 Feb 2014, 17:38

18 Sep 2018, 09:04

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>

User avatar
aragorn
Posts: 3206
Joined: 29 Jun 2013, 12:38

18 Sep 2018, 13:35

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
Posts: 240
Joined: 02 Feb 2014, 17:38

18 Sep 2018, 13:41

Thank you.
But I got for pt:data-tooltip
pt:data-tooltip
Any ideas? Is there anything missing (.lib, jar...)

vished
Posts: 240
Joined: 02 Feb 2014, 17:38

18 Sep 2018, 13:42

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"/>

User avatar
aragorn
Posts: 3206
Joined: 29 Jun 2013, 12:38

18 Sep 2018, 13:45

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

Post Reply

Return to “Morpheus - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest