Tooltip for TimelineEvent

Community Driven Extensions Project
Post Reply
User avatar
ramo102
Posts: 56
Joined: 05 Oct 2012, 12:02

16 Jan 2013, 17:06

Hi all,

I would like to know if it is possible to associate a tooltip to a TimelineEvent.

Thanks in advance.
PrimeFaces 4.0, PrimeFaces Extensions 1.2.0, Mojarra 2.1.13, Tomcat 7.0.42, Eclipse Indigo SR2

nileshmali
Posts: 110
Joined: 10 Nov 2010, 13:43
Location: Pune, India
Contact:

18 Jan 2013, 08:24

Have you tried custom events?

I think you can try custom events and associate tooltip to event.

Let me know if this approach works or not.
Nilesh N. Mali
---
Angular 2.x | Prime NG
FF: latest | Chrome: latest | vscode
Blog: http://nileshmali.blogspot.in | PrimeFaces Extensions: https://github.com/primefaces-extensions

User avatar
ramo102
Posts: 56
Joined: 05 Oct 2012, 12:02

18 Jan 2013, 18:35

I tried to associate a tooltip to a timeline event, but my approach does not work.

Code: Select all

<h:body>
	<h:form id="mainForm">
	<p:spacer width="100%" height="10" />
	
	<p:accordionPanel>
		<p:tab title="accordion">
			<pe:timeline id="accTimeline" value="#{timelineController.unavailabilities}"
				axisPosition="top"
				showNavigation="false"
				eventStyle="dot"
				height="300px"
				width="100%"
			>
				<p:ajax event="eventSelect" 
						listener="#{timelineController.onEventSelect}" 
						process="@this" 
						update=":mainForm:viewDialog" 
						oncomplete="viewDlg.show()"
				/>
			</pe:timeline>
		</p:tab>
	</p:accordionPanel>

	<!--
	<pe:tooltip for="#{timelineController.selectedEvent}" value="Informazioni principali (da definire)" 
		showEvent="slideToggle" hideEvent="slideToggle" />
	-->
	
	<p:dialog id="viewDialog" modal="true" 
			dynamic="true" widgetVar="viewDlg" 
			appendToBody="true" resizable="false"
			header="Dettagli" width="350">
		<p:fieldset>
			<h:panelGrid columns="2">
				<h:outputText value="Responsabile:" />
				<h:outputText value="#{timelineController.selectedEvent.title}" />
				<h:outputText value="Data Inizio:" />
				<h:outputText value="#{timelineController.selectedEvent.startDate}">
					<f:convertDateTime pattern="dd MMM yyyy" />
				</h:outputText>
				<h:outputText value="Data Fine:" />
				<h:outputText value="#{timelineController.selectedEvent.endDate}">
					<f:convertDateTime pattern="dd MMM yyyy" />
				</h:outputText>
			</h:panelGrid>
		</p:fieldset>
	</p:dialog>
	
	</h:form>

</h:body>
</f:view>
</html>
If I uncomment the pe:tooltip object, the following exception occurs:

Code: Select all

java.lang.IllegalArgumentException: ""
	at javax.faces.component.UIComponentBase.findComponent(UIComponentBase.java:570)
	at org.primefaces.extensions.util.ComponentUtils.findTarget(ComponentUtils.java:132)
	at org.primefaces.extensions.util.ComponentUtils.findTarget(ComponentUtils.java:113)
	at org.primefaces.extensions.component.tooltip.TooltipRenderer.encodeEnd(TooltipRenderer.java:52)
	at javax.faces.component.UIComponentBase.encodeEnd(UIComponentBase.java:875)
	at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1786)
	at javax.faces.render.Renderer.encodeChildren(Renderer.java:168)
	at javax.faces.component.UIComponentBase.encodeChildren(UIComponentBase.java:845)
	at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1779)
	at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1782)
	at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1782)
	at com.sun.faces.application.view.FaceletViewHandlingStrategy.renderView(FaceletViewHandlingStrategy.java:424)
	at com.sun.faces.application.view.MultiViewHandler.renderView(MultiViewHandler.java:124)
	at com.sun.faces.lifecycle.RenderResponsePhase.execute(RenderResponsePhase.java:121)
	at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101)
	at com.sun.faces.lifecycle.LifecycleImpl.render(LifecycleImpl.java:139)
	at javax.faces.webapp.FacesServlet.service(FacesServlet.java:594)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:305)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
	at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:222)
	at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:123)
	at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:472)
	at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:168)
	at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:99)
	at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:929)
	at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:118)
	at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:407)
	at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1002)
	at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:585)
	at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:310)
	at java.util.concurrent.ThreadPoolExecutor$Worker.runTask(ThreadPoolExecutor.java:886)
	at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:908)
	at java.lang.Thread.run(Thread.java:662)
PrimeFaces 4.0, PrimeFaces Extensions 1.2.0, Mojarra 2.1.13, Tomcat 7.0.42, Eclipse Indigo SR2

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

18 Jan 2013, 19:52

I would like to know if it is possible to associate a tooltip to a TimelineEvent.
What is the problem? I don't know if you can assign a styleClass to timeline events, but if you can it, you can use "forSelector" attribiute then, e.g.

Code: Select all

<pe:tooltip value="Informazioni principali (da definire)"  forSelector=".styleClassOfTimelineEvent"/>
Simple look in Firebug what CSS class has a container element for timeline event.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

yaaska
Posts: 57
Joined: 19 Apr 2013, 19:13

23 Jan 2014, 21:01

Ramo, Oleg,

Have you guys figured out if you can put tooltips on each timeline item.

I just started using this extension and need help with toolltips as well.

I need to be able to pass some information from the bean side and once you mouse over a timeline item, I want to display that info.


This is the demo I am using.

http://fractalsoft.net/primeext-showcas ... custom.jsf


Thanks

Y

florin.manea
Posts: 4
Joined: 26 Apr 2014, 10:58

17 Oct 2014, 22:04

The trick is:
  • place tooltips outside the pe:timeline definition
  • define in the data associated with the timeline events some unique identifier and based on add unique class identifier to each event
  • use jquery type selectors in tooltip for attribute (using the same class definition algorithm as mentioned before)
  • add ajax rangechanged event to update the container of externally defined tooltips; if one timeline event is far enough from visible area it is not created at first page GET so tooltip for attribute will not work

Code: Select all

<pe:timeline id="timelineInvoicing" value="#{phaseController.invoicingMilestonesModel}" var="milestone" varGroup="group"  widgetVar="timelineInvoicingWdgt">
		<f:facet name="group" >
				<h:outputText value="#{group}" style="font-weight:bold;" />  
		</f:facet>

		<h:panelGrid columns="1" class="invoicingMilestonesModelClass4Id_#{milestone.id}" >
				<h:outputText value="#{milestone.value}">
						<f:convertNumber pattern="#,##0" />
				</h:outputText>  
		</h:panelGrid>

		<p:ajax event="rangechanged" global="false" update="tooltips4TimelineInvoicing"/>
</pe:timeline>

<p:panel id="tooltips4TimelineInvoicing" style="display: none">
		<ui:repeat value="#{phaseController.invoicingMilestonesModel.events}" var="milestone4Tooltip" >
				<p:tooltip for="@(.invoicingMilestonesModelClass4Id_#{milestone4Tooltip.data.id})">
						<h:outputText value="#{milestone4Tooltip.data.date}" >
								<f:convertDateTime pattern="dd.MM.yyyy" />
						</h:outputText>  
				</p:tooltip>
		</ui:repeat>
</p:panel>

[/color]

blackbee045
Posts: 1
Joined: 22 Oct 2014, 05:20

22 Oct 2014, 06:12

Thankx for this great and very helpful help......
GuL

Eiten
Posts: 7
Joined: 08 May 2015, 13:59

26 Jul 2019, 23:32

Hi,

I know that is old post but have one question. I set up it in me project and is it working autil timeline range change. After that stops work, ay updates do not help.What is the reason and how to solve it?

User avatar
Melloware
Posts: 1182
Joined: 22 Apr 2013, 15:48

27 Jul 2019, 14:19

Thanks for posting your question in PF forum instead since the component has moved to PF from PFE.

But I think your issue is: https://github.com/primefaces/primefaces/issues/4770
PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.4 / PF Extensions 7.0.1

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest