voyent
How to us Tooltip in DataTable Row??  XML
Forum Index -> Components Go to Page: 1, 2 Next 
Author Message
Marioko

Joined: 14/Nov/2006 00:00:00
Messages: 125
Offline


yep that question.. how can i show a tooltip panel when the user mouse over a row in a DataTable??

thanks
mark.collette


Joined: 07/Feb/2005 00:00:00
Messages: 1692
Offline


I believe that in the component-showcase sample application, in the Layout Panels section, there's a page called Tooltip Panel. Example 3 of that page demonstrates what you're looking for. It's available in the binary and source distributions of ICEfaces.
[Email]
Marioko

Joined: 14/Nov/2006 00:00:00
Messages: 125
Offline


Ohh thanks... i found it :D
geniusit

Joined: 04/Dec/2006 00:00:00
Messages: 64
Offline


I can't find it.
Where is it?
in the http://component-showcase.icefaces.org/component-showcase/showcase.iface in the tooltip panel example there is no example with table!
judy.guglielmin

Joined: 20/Feb/2007 00:00:00
Messages: 1396
Offline


You would have to get the older version of component-showcase for that example (I believe it's in 1.6.2 or 1.6.1).
mhanke

Joined: 08/May/2007 00:00:00
Messages: 3
Offline


Hi,

I can't find it too. Could you post a simple example of the jspx code please?

thx
judy.guglielmin

Joined: 20/Feb/2007 00:00:00
Messages: 1396
Offline


Just go to the downloads page and download ICEfaces 1.6.1 or 1.6.2...then you can build the component-showcase and see the source as well. I don't have a copy handy to place here.
Maevel

Joined: 10/Jul/2008 00:00:00
Messages: 18
Offline


I downloaded 1.6.1 and 1.6.2 and couldn't find this example. Are you sure it's in these releases?
judy.guglielmin

Joined: 20/Feb/2007 00:00:00
Messages: 1396
Offline


From seam-comp-showcase for 1.6.1 ICEfaces:- (same as old component-showcase markup)

Code:
    <ice:panelGroup styleClass="formBorderHighlight">
             <h3>
                 <ice:outputText
                         value="Example 3"/>
             </h3>
             <h4>
                 <ice:outputText 
                         value="This example is using a draggable panelTooltip with hideOn = 'mousedown', hoverDelay='1000' milliseconds. To bring the tooltip up, please hover on the first name of any row. To close this tooltip please click outside the tooltip panel. The panelTooltip is placed outside of the dataTable"/>
             </h4>
             <ice:dataTable id="toolTipdata" var="person"
                        styleClass="dataPaginatorTable"
                        value="#{personsF.resultList}" rows="8"
                        columnClasses="firstCol,lastCol,phoneCol,emailCol">
             <ice:column>
                 <f:facet name="header">
                     <ice:outputText id="col_1" value="#{msgs['component.table.column1']}"/>
                 </f:facet>
                 <ice:panelGroup panelTooltip=":::recordPanelToolTip">
                     <ice:outputText id="first_Name" value="#{person.firstName}"/>
                 </ice:panelGroup>
             </ice:column>
 
             <ice:column>
                 <f:facet name="header">
                     <ice:outputText id="col_2" value="#{msgs['component.table.column2']}"/>
                 </f:facet>
                 <ice:outputText id="last_Name" value="#{person.lastName}"/>
             </ice:column>
 
             <ice:column>
                 <f:facet name="header">
                     <ice:outputText id="col_3" value="#{msgs['component.table.column3']}"/>
                 </f:facet>
                 <ice:outputText id="phone_No" value="#{person.phoneNo}"/>
             </ice:column>
 
             <ice:column>
                 <f:facet name="header">
                     <ice:outputText id="col_4" value="#{msgs['component.table.column4']}"/>
                 </f:facet>
                 <ice:outputLink id="mail_to" value="mailto:#{person.email}">
                     <ice:outputText id="email" value="#{person.email}"/>
                 </ice:outputLink>
             </ice:column>
         </ice:dataTable>
     </ice:panelGroup>
  
 	<ice:panelTooltip id="recordPanelToolTip"
 	           hideOn="mousedown"
 	           hoverDelay="1000"
 	           draggable="true"
 	           style="width: 300px; height:200px;"
 	           displayListener="#{tooltip.displayListener}"
 	           >
 	
 	       <f:facet name="header">
 	           <ice:panelGrid id="draggablePanelGrid"
 	                          width="100%" cellpadding="0"
 	                          cellspacing="0" columns="2"
 	                          columnClasses="none, popupButton">
 	               <ice:outputText value="#{msgs['component.paneltooltip.tabledemoheader']}"/>
 	           </ice:panelGrid>
 	       </f:facet>
 	
 	       <f:facet name="body">
 	           <ice:panelGroup>
 	                   <ice:outputText style="display:inline" value="#{msgs['component.table.column1']} : "/>
 	                   <ice:inputText id="tooltip_firstname" value="#{tooltipPerson.firstName}"/> <br/>
 	
 	                   <ice:outputText style="display:inline" value="#{msgs['component.table.column2']} : "/>
 	                   <ice:inputText id="tooltip_lastname" value="#{tooltipPerson.lastName}"/><br/>
 	
 	                   <ice:outputText style="display:inline" value="#{msgs['component.table.column3']} : "/>
 	                   <ice:inputText id="tooltip_phoneno" value="#{tooltipPerson.phoneNo}"/><br/>
 	
 	                   <ice:outputText style="display:inline" value="#{msgs['component.table.column4']} : "/>
 	                   <ice:inputText id="tooltip_email" value="#{tooltipPerson.email}"/><br/>
 
 	           </ice:panelGroup>
 	       </f:facet>
 	
 	   </ice:panelTooltip>                
    
 
Maevel

Joined: 10/Jul/2008 00:00:00
Messages: 18
Offline


Thanks Judy. I've two questions arising from this.
1. The tooltip seems to display only for the outputText component and not each part of the table cell. I want to have a table which has nothing in each cell but when the mouse goes over each cell, a tool tip with infomation is displayed. Is this possible? Each cell will be of differing width which is calculated on the fly so I can't have an output text of fixed length in each cell.

2. The tooltip is displaying miles away from the component. I've tried editing the css of the component but I haven't been able to get it to display next to it.

Regards,
Maeve
Maevel

Joined: 10/Jul/2008 00:00:00
Messages: 18
Offline


I got around this problem by creating an image that expanded to fit the table cells and each image then had a title which displays a tooltip. I didn't use the icefaces paneltooltip in the end.
alexust

Joined: 01/Jul/2008 00:00:00
Messages: 8
Offline


so which tooltip component, u are using?

IT = it must be done
Maevel

Joined: 10/Jul/2008 00:00:00
Messages: 18
Offline


I just used the title attribute of ice:graphicImage. This displays a standard tooltip message.
mark.collette


Joined: 07/Feb/2005 00:00:00
Messages: 1692
Offline


ice:panelTooltip is made to display over any ice:panelGroup, not outputText. The panelGroup can of course have outputText, or any other components, inside of it.

If any kind of popup component, like the menus, panelPopup, or panelTooltip, is displaying at an offset from where it should, it's because it's contained somewhere within a DIV that's style with position:absolute; or position:relative;. Just pull it out of that DIV, or don't using that styling, and it will display where it should.

Use of the title attribute is preferred to using ice:panelTooltip, for simple text, because that's what title is for, screen readers for the visually impaired will work better with it, and the markup is smaller. ice:panelTooltip is intended for cases that title doesn't cover, like controlling what event makes it go away, and being able to display arbitrary components, like images, which title can't do.
[Email]
malkit

Joined: 31/Jan/2009 00:00:00
Messages: 12
Offline


Hi,

I have similar requirement and was able to generate paneltooltip for the table row.

The issue that I am facing now is that when the tooltip pops up, I need to show the data from another table inside the tooltip body wherein the data from this second table is selected based on the mouse over the row.

So, how can i get the selected row to generate the data for the tooltip. The problem with rowselector is that you need to click the row to generate this event, what I need is a way to generate the row selector event when the user moves the mouse over the row.

Any pointers will be highly appreciated.

Malkit S. Bhasin
 
Forum Index -> Components Go to Page: 1, 2 Next 
Go to:   
Powered by JForum 2.1.7ice © JForum Team