Tooltip Window

Hi,

I am curious how to set a ToolTip on an Datatable-Element, depending on the current row.

 [...]
 <g:dataTd  labelText="#{bundle.lblEntity}" width="200"> 
     <h:outputText  value="#{ROW.name}" />
 </g:dataTd>
 [...]

I need a popup when the user moves the mouse over the "ROW.name" element. It should open "onMouseOver" and close, when the user leaves the "ROW.name" element (onBlur ?).

Should I use a Window-Control or wrap the "h:outputText" element by a "Menu-Control"? Any Ideas ?

Thanks for any help!

Hello!

The best solution is to use popupmenu component inside a dataTd, but you have to make a trick, to obtain a different instance of popupmenu on every iteration through dataModel.

     <e:dataTd id="popupRow" labelText="Customer ID" rendersChildren="true">
 
                     <e:div popupComponent="#{crudBean.myPopupmenuId}" width="80" height="10" style="background-color:red;"/>
 
                     <e:popupmenu  id="myPopupmenu"
                                   binding="#{crudBean.myPopupmenu}"
                                   popupTrigger="mouseover"
                                   hideTrigger="mouseout">
                         <e:menucell text="#{ROW.customerId}"/>
                     </e:popupmenu>
                 </e:dataTd>

Inside the java bean, you should have:

 .....
 private PopupDiv myPopupmenu;
 // getter & setter
 ....
  public String getMyPopupmenuId() {
     if(myPopupmenu != null){
       return myPopupmenu.getClientId(FacesContext.getCurrentInstance());
     }else{
       return "myPopupmenu";
     }
   }

That's all

Thank you very much! I'll try it!

Hi there,

your example worked so far ... but not in the way as I expected ;)

I need a <h:outputText> Tag to render the data in the first "<e:dataTd>" cell, like this:

 [...]
 <g:dataTr>
     <g:dataTd>
         <h:outputText value="#{ROW.entity.data}" styleClass="labelNormal"  style="font-weight:bold;" />
 [...]

I want a popup, when the user moves the mouse over the <h:output> Text.

The "<e:div>" Container doesn't resize the cell (Table-Row) to the desired height, if the "#{ROW.entity.data}" has to be wrapped to multiple lines (because it doesn't fit in one line).

The manual states, that all ECruiser Components have an "popupComponent" Tag. So I tried successfully :

 <e:textarea popupComponent="#{crudBean.myPopupmenuId}" value="#{ROW.entity.data}">

However I've got some style-issues with TextArea ... so I tried to switch to an ECruiser component, more similar to "<h:outputText>" and tried <e:label>.

However <e:label> doesn't have an popupComponent-Attribute. ECComponent seems to have it, but it is not defined in the TLD for "Labels" ... Am I missing something?!

One more thing with the popup, putting a <h:output>-Tag in a facet doesn't seem to work for me.

This doesn't render a popup:

 		<g:dataTd width="200" rendersChildren="true">
 			<f:facet name="header">
 				<h:outputText value="#{bundle.lblKennzahlenEingebenKennzahlEinheit}"/>
 			</f:facet>
 			<g:popupmenu id="myPopupmenu" binding="#{aliasBean.myPopupmenu}"  
 					hideTrigger="mouseout" popupTrigger="mouseover"> 
 	             <g:menucell text="">
 					<f:facet name="text">                 	
 						<h:outputText 
 							value="#{ROW.kennzahlBeschreibung.beschreibung}"
 							styleClass="labelNormal" />
 					</f:facet>		
  	             </g:menucell>
 	        </g:popupmenu>
 				<g:textarea popupComponent="#{aliasBean.myPopupmenuId}" styleClass="labelNormal" 
 					value="#{ROW.kennzahlBeschreibung.name}" styleClass="labelNormal" />
 				<t:htmlTag value="br" />
 				<h:outputText value="[" escape="false" styleClass="labelNormal" />
 				<h:outputText 
 					value="#{ROW.kennzahl.einheit.uiKurzbezeichnung}"
 					styleClass="labelNormal" style="font-weight:bold;" />
 				<h:outputText value="]" escape="false" styleClass="labelNormal" />
 		</g:dataTd>

This renders the popup :

 <g:menucell text="#{ROW.kennzahlBeschreibung.name}">

but I's rather like to use standard JSF Components inside the popup ... any ideas here ?!

Regarding dataTable, why don't you use simple:

 <g:dataTd value="#{ROW.name}"  labelText="#{bundle.lblEntity}" width="200" />

Regarding popupmenu, why do you need a facet, when you have a menucell tag which accomplish your needs?

Because your solution doesn't work. I need the popup when the mouse cursor moves over the displayed text in the first column. I don't need a popup area before ar after the data.

But I figured it out. Your first solution almost worked:

the missing part was to set

 style="auto;" rendersChildren="true"

in the div-container. Now the h:output tag is rendered and an individual "per row" popup appears when moving the mouse over the text in the first column.

The complete code:

 [...]
 <g:dataTr>
     <g:dataTd width="200" style="text-align: left">
 
         <e:div popupComponent="#{aliasBean.myPopupmenuId}" style="auto;" rendersChildren="true">
            <h:outputText value="#{ROW.data} [#{ROW.unit}]" styleClass="labelNormal"/>
         </e:div>
 		
         <e:popupmenu id="myPopupmenu" binding="#{aliasBean.myPopupmenu}" hideTrigger="mouseout" popupTrigger="mouseover"> 
              <e:menucell text="#{ROW.detailData}"/>
 	        
         </e:popupmenu>
 [...]

Thanks for your help.


	Home \| News \| Contact \| About \| License \| Privacy \| Documentation
	Copyright © 2009 Simplica Corporation. All rights reserved.