Hi all,
I would like to know if it is possible to associate a tooltip to a TimelineEvent.
Thanks in advance.
Tooltip for TimelineEvent
-
- Posts: 110
- Joined: 10 Nov 2010, 13:43
- Location: Pune, India
- Contact:
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.
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
---
Angular 2.x | Prime NG
FF: latest | Chrome: latest | vscode
Blog: http://nileshmali.blogspot.in | PrimeFaces Extensions: https://github.com/primefaces-extensions
I tried to associate a tooltip to a timeline event, but my approach does not work.
If I uncomment the pe:tooltip object, the following exception occurs:
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>
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
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.I would like to know if it is possible to associate a tooltip to a TimelineEvent.
Code: Select all
<pe:tooltip value="Informazioni principali (da definire)" forSelector=".styleClassOfTimelineEvent"/>
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
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
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
-
- Posts: 6
- Joined: 26 Apr 2014, 10:58
The trick is:
[/color]
- 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>
-
- Posts: 1
- Joined: 22 Oct 2014, 05:20
Thankx for this great and very helpful help......
GuL
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
But I think your issue is: https://github.com/primefaces/primefaces/issues/4770
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
-
- Information
-
Who is online
Users browsing this forum: No registered users and 7 guests