rich:toolTip issues
james.holder3 Jun 4, 2008 10:01 AMRight now I'm looking at 3 distinct issues with ToolTip, in particular with toolTip used in a rich:column header. If I'm doing something wrong, or the issue is already resolved, please let me know. Thanks in advance.
Info:
IE6
RichFaces 3.2.1CR5
JSF 1.2_05
Facelets 1.1.14
BEA 10
Issue 1: When setting up a toolTip, inside of a column header, the width style is ignored. If i explicitly set width:50px, it behaves like a normal block level element and expands most of the way across the screen. (see example below)
Issue 2: When using a tooltip with rich:dataTable, and using the built in sorting, almost immediately after sorting, IE throws a JS error: 'this.toolTip.style' is null or not an object Everything functions still after this, but its annoying.
Issue 3: As a workaround to not being able to set the width of the tooltip explicitly, I set up up a table inside the tooltip, and basically made the tooltip elements invisible so that only hte table displayed. After sorting however, the background of the tooltip (which was background:none) became white.
Here is the info for my test cases:
Bean:
public class DataBean implements Serializable { public void DataBean(){} private List<MagicalItem> myItems; public List<MagicalItem> getMyItems() { if(this.myItems==null){ List<MagicalItem> newList = new ArrayList(); for(int i=0;i<100;i++){ MagicalItem mi = new MagicalItem(); mi.setId(i); mi.setName("Magic Item "+i); mi.setProperties("Item "+i+" can do many wonderous things."); newList.add(mi); System.out.println("Have create magical item: "+i); } this.setMyItems(newList); } return myItems; } public void setMyItems(List<MagicalItem> myItems) { this.myItems = myItems; } }
Page (snippet):
<style type="text/css"> /*for rich faces tooltip widget*/ .myToolTip{ width:225px; border:none; background-color:transparent; font-size:.8em; } .myToolTip table{ border-collapse:collapse; margin:0; } .myToolTip th{ border:1px solid #ddd; font-weight:bold; background: #ddd; padding:3px 10px 3px 5px; } .myToolTip td{ border:1px solid #ddd; padding:3px 10px 3px 5px; background-color:#fff; } </style> <p>Testing ToolTip (baseline)</p> <h:outputText id="bob" value="MOUSE OVER ME"> <rich:toolTip showDelay="1100" hideDelay="300" attached="true" layout="block" style="width:150px;" > I AM THE GREATEST TOOLTIP EVER!I AM THE GREATEST TOOLTIP EVER!I AM THE GREATEST TOOLTIP EVER!I AM THE GREATEST TOOLTIP EVER!I AM THE GREATEST TOOLTIP EVER! </rich:toolTip> </h:outputText> <p>Testing Table Header Tooltip (width not working)</p> <h:form> <rich:dataTable value="#{testData.myItems}" var="item" id="itemList" > <rich:column id="myid" sortBy="#{item.id}"> <f:facet name="header"> <h:outputText id="idHeader" value="ID"> <rich:toolTip showDelay="1100" hideDelay="300" attached="true" layout="block" style="width:150px;" > I AM THE GREATEST TOOLTIP EVER!I AM THE GREATEST TOOLTIP EVER!I AM THE GREATEST TOOLTIP EVER!I AM THE GREATEST TOOLTIP EVER!I AM THE GREATEST TOOLTIP EVER! </rich:toolTip> </h:outputText> </f:facet> <h:outputText value="#{item.id}"/> </rich:column> </rich:dataTable> </h:form> <p>Testing Table Header Tooltip (weird background changing issue 3)</p> <h:form> <rich:dataTable value="#{testData.myItems}" var="item" id="itemList" > <rich:column id="myid2" sortBy="#{item.id}"> <f:facet name="header"> <h:outputText id="idHeader2" value="ID"> <rich:toolTip styleClass="myToolTip" showDelay="1100" hideDelay="300" attached="true" > <table> <tr><th>Name</th></tr> <tr><td>I AM THE GREATEST TOOLTIP EVER!I AM THE GREATEST TOOLTIP EVER!I AM THE GREATEST TOOLTIP EVER!I AM THE GREATEST TOOLTIP EVER!I AM THE GREATEST TOOLTIP EVER! </td></tr> </table> </rich:toolTip> </h:outputText> </f:facet> <h:outputText value="#{item.id}"/> </rich:column> </rich:dataTable> </h:form>