Tooltip for TimelineEvent

[ramo102]

Hi all,

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

Thanks in advance.

[nileshmali]

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.

[ramo102]

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)

[Oleg]

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.

[yaaska]

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]

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]

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

[Eiten]

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?

[Melloware]

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