rich:toolTip issues
Right 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>