2 Replies Latest reply on Jun 13, 2008 12:07 PM by Mikhail Vitenkov

    rich:toolTip issues

    james holder Newbie

      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>
      
      
      


        • 1. Re: rich:toolTip issues
          james holder Newbie

          anyone? Any ideas?

          • 2. Re: rich:toolTip issues
            Mikhail Vitenkov Newbie

            Insted of using rich:toolTip inside h:outputText, which is in rich:column, as in your attached source code try to use following construction:
            <rich:column id="myid" sortBy="#{item.id}">
            <f:facet name="header">
            <h:panelGroup>
            <!--place h:outputText & rich:tooltip inside h:panelGroup -->

            <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:panelGroup>
            </f:facet>
            <h:outputText value="#{item.id}"/>
            </rich:column>
            In my case width style isn't ignored. Was verified under IE.