12 Replies Latest reply on Mar 26, 2009 11:25 AM by Florian Duehring

    Display problem with tooltip element

    Florian Duehring Newbie

      Hi all,

      I have a display problem with the richfaces tooltip element. I created a tooltip element programatically:

      HtmlToolTip toolTip = new HtmlToolTip();
      toolTip.setFor("reportItemsTableColumn_dt_id");
      
      //counter
      Integer k = 0;
      
      for (ReportColumn reportColumn : this.reportSession.getCurrentReport().getColumns()) {
       HtmlOutputText toolTipValue = new HtmlOutputText();
       ValueExpression valueExpressionToolTipValue =
       FacesContext.
       getCurrentInstance().getApplication().
       getExpressionFactory().createValueExpression(
       FacesContext.getCurrentInstance().getELContext(),
       "#{reportRow.cells[" + k + "].plainValue}<br />",
       String.class
       );
       toolTipValue.setValueExpression(
       "value",
       valueExpressionToolTipValue
       );
       toolTipValue.setEscape(false);
      }


      The tooltip is shown as expected, but the text inside is always shown in one line (no linebreak), which means the the text is written over the border of the tooltip.
      Does anybody know how to achieve that the text fits into the tooltip?

        • 1. Re: Display problem with tooltip element
          Ilya Shaikovsky Master

          check please with fireBug the styles applied to your tooltip.

          • 2. Re: Display problem with tooltip element
            Florian Duehring Newbie

            Hi ilya_shaikovsky,

            thanks for your reply.
            Firebug shows the following:

            <span id="frm_content:dtb_frm_content:1:j_id47:0:j_id48" class="dr-rich-tool-tip rich-tool-tip" style="z-index: 99; background-color: white; width: 500px; visibility: hidden; display: none; left: 28px; top: 290px;">
            <span id="frm_content:dtb_frm_content:1:j_id47:0:j_id48content">
            History:
            <br/>
            <span style="color: gray; text-decoration: none;">
            Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text <br/>
            </span>
            Category:
            <br/>
            <span style="color: gray; text-decoration: none;">
            Continuous Improvement
            <br/>
            </span>
            </span>
            <span id="frm_content:dtb_frm_content:1:j_id47:0:j_id48script" style="display: none;">
            <script id="scriptfrm_content:dtb_frm_content:1:j_id47:0:j_id48" type="text/javascript">
            1
            2new ToolTip({'showEvent':'mouseover','delay':0,'hideEvent':'','hideDelay':0} ,{'onshow':null,'onhide':null,'oncomplete':null} ,"frm_content:dtb_frm_content:1:j_id47:0:j_id48","frm_content:dtb_frm_content:1:j_id47:0:reportItemsTableColumn_dt_id","client",false,"bottom-right",false,10,10,function(event,ajaxOptions){A4J.AJAX.Submit('_viewRoot','frm_content',event,ajaxOptions)},{'control':this,'oncomplete':function(request,event,data){;{var _toolTip = $('frm_content:dtb_frm_content:1:j_id47:0:j_id48').component;_toolTip.toolTipContent = $('frm_content:dtb_frm_content:1:j_id47:0:j_id48content');_toolTip.displayDiv();}},'similarityGroupingId':'frm_content:dtb_frm_content:1:j_id47:0:j_id48','parameters':{'frm_content:dtb_frm_content:1:j_id47:0:j_id48':'frm_content:dtb_frm_content:1:j_id47:0:j_id48','ajaxSingle':'frm_content:dtb_frm_content:1:j_id47:0:j_id48'} ,'onbeforedomupdate':function(request,showEvent,data){;{ var _toolTip = $('frm_content:dtb_frm_content:1:j_id47:0:j_id48').component;_toolTip.toolTip.style.display = 'none'; }},'actionUrl':'/fode/report.faces'} );;
            3
            4
            </script>
            </span>
            </span>


            The Some text Some text... part is shown in one line and not broken when the width of the tooltip is reached...

            I forgot to mention that I also adjusted the style for the tooltip (as you also can see in the firebug output):

            toolTip.setStyle("background-color:white;width:500px;");


            Moreover it might be important how I added the tooltip into the element tree.
            I added the tooltip to a column, which was also created programmatically:

            HtmlColumn columnId = new HtmlColumn();
             columnId.setId("reportItemsTableColumn_dt_id");
            ....
            columnId.getChildren().add(toolTip);
            toolTip.setFor("reportItemsTableColumn_dt_id");
            


            Thanks for your help!

            • 4. Re: Display problem with tooltip element
              Ilya Shaikovsky Master

               

              <span id="frm_content:dtb_frm_content:1:j_id47:0:j_id48" class="dr-rich-tool-tip rich-tool-tip" style="z-index: 99; background-color: white; width: 500px; visibility: hidden; display: none; left: 28px; t
              op: 290px;">
              


              this span changed with JS to visibility:'' and display:block. So the text inside should be wrapped to the width as it become block element. And actually it's wrapped on my side.
              I still can't reproduce the error in FF 3 trying different doctypes. also tried to define it within the column as in your case.



              • 5. Re: Display problem with tooltip element
                Florian Duehring Newbie

                Hi,
                I figured out what the problem is. I appended the html fragment which contains the tooltip to the form tag (with fireburg), then the tooltip was shown as expected. In the code I posted I appended the tooltip to the column, this seems to be responsible for the wrong display.
                Now I tried to append the tooltip to a tag outside the table also in the code. But since the span tag the tooltip is rendered to is only created once then, it doesn't bring the expected result.
                Do you have an idea how to solve this?

                Thanks

                • 7. Re: Display problem with tooltip element
                  Ilya Shaikovsky Master

                   


                  Now I tried to append the tooltip to a tag outside the table also in the code. But since the span tag the tooltip is rendered to is only created once then, it doesn't bring the expected result.


                  The problem described there not clear for me.. Do you mean that it doesn't works at all attached to some element outside the table? Define the id explicitly to the component parent to tooltip.

                  • 8. Re: Display problem with tooltip element
                    Florian Duehring Newbie

                    what I did was the following:
                    1)

                    HtmlColumn columnId = new HtmlColumn();
                    ...
                    HtmlOutputLink linkId = new HtmlOutputLink();
                    linkId.setId("linkId");
                    ...
                    HtmlOutputText textId = new HtmlOutputText();
                    textId.setId("textId");
                    ...
                    HtmlToolTip toolTip = new HtmlToolTip();
                    toolTip.setFor("textId");
                    textId.getChildren().add(toolTip);
                    
                    linkId.getChildren().add(textId);
                    columnId.getChildren().add(linkId);
                    

                    This worked (nearly) as expected, the tooltip appeared but it didn't fit into the tooltip box (the problem why I opened this post).
                    2) Then I took the rendered html and modified the html directly with firebug without touching the jsf or java code. I removed the rendered tooltip element (span) which was a child of the link (a) and appended it to the root form element. Then the tooltip was rendered as expected.
                    3) I bound the form element of the jsf page (h:form) to an attribute of my backing bean and then tried to add the tooltip to the form, but set the id of the text element in the setFor method
                    <h:form id="frm_content" binding="#{report.form}">
                    ...
                    

                    HtmlColumn columnId = new HtmlColumn();
                    ...
                    HtmlOutputLink linkId = new HtmlOutputLink();
                    linkId.setId("linkId");
                    ...
                    HtmlOutputText textId = new HtmlOutputText();
                    textId.setId("textId");
                    ...
                    HtmlToolTip toolTip = new HtmlToolTip();
                    toolTip.setFor("textId");
                    this.form.getChildren().add(toolTip);
                    
                    linkId.getChildren().add(textId);
                    columnId.getChildren().add(linkId);
                    


                    But unfortunately this didn't work at all, the tooltip is not shown when I move over the link.

                    Any ideas how to resolve this?

                    • 9. Re: Display problem with tooltip element
                      Nick Belaevski Master

                      Hello,

                      Tooltip cannot be attached to h:outputText, please enclose text into a4j:outputPanel and attach tooltip to it.

                      • 10. Re: Display problem with tooltip element
                        Florian Duehring Newbie

                        Hi,

                        I tried the following, but the problem still exists:

                        
                        ...
                        HtmlAjaxOutputPanel outputPanelId = new HtmlAjaxOutputPanel();
                        outputPanelId.setId("outputPanelId");
                        linkId.getChildren().add(outputPanelId);
                        
                        HtmlOutputText textId = new HtmlOutputText();
                        ...
                        outputPanelId.getChildren().add(textId);
                        
                        HtmlToolTip toolTip = new HtmlToolTip();
                        toolTip.setFor("textId");
                        outputPanelId.getChildren().add(toolTip);
                        ...
                        


                        The problem is the same as before, the tooltip get's rendered but the text is not wrapped as expected.

                        Any other ideas how to solve this?

                        • 11. Re: Display problem with tooltip element
                          Florian Duehring Newbie

                          Hi,

                          I tried the following, but the problem still exists:

                          
                          ...
                          HtmlAjaxOutputPanel outputPanelId = new HtmlAjaxOutputPanel();
                          outputPanelId.setId("outputPanelId");
                          linkId.getChildren().add(outputPanelId);
                          
                          HtmlOutputText textId = new HtmlOutputText();
                          ...
                          outputPanelId.getChildren().add(textId);
                          
                          HtmlToolTip toolTip = new HtmlToolTip();
                          toolTip.setFor("textId");
                          outputPanelId.getChildren().add(toolTip);
                          ...
                          


                          The problem is the same as before, the tooltip get's rendered but the text is not wrapped as expected.

                          Any other ideas how to solve this?