tooltip for a message

[giunad]

Hi everybody.

I'm having a problem with a tooltip nested into a rich:message component.

I have 2 input box email1 and email2 and on key up event, I check that inputs are equal.

In case of error a message is added to the context so a gif is showed but the tooltip never appears.

what is wrong with my code?

the page:

<h:outputLabel id="labForEma1" for="email1">E-mail</h:outputLabel>

<h:inputText id="email1" value="#{userform.email1}" immediate="true">
     <a:support event="onkeyup" actionListener="#{userform.changeEmail}"/>
</h:inputText>


<h:outputLabel id="labForEma2" for="email2">Ridigita e-mail</h:outputLabel>

<h:inputText id="email2" value="#{userform.email2}" immediate="true">
     <a:support event="onkeyup" actionListener="#{userform.changeEmail}"/>
</h:inputText>     
                                                  
<rich:message id="msg-email1" for="email1" showDetail="false">
     <f:facet id="facet-email1" name="errorMarker">
          <h:graphicImage id="img-email1" url="../icons/cancel.gif"/>
     </f:facet>
</rich:message>
<rich:toolTip id="tool-email1" for="img-email1">
     <rich:message id="tooltext-email1" for="email1" showSummary="true" />
</rich:toolTip>

the action listener:

public void changeEmail(){

     if (email1 == null)
          email1 = "";
     if (email2 == null)
          email2 = "";
     if (!email1.equals(email2)) {
          System.out.println("qui2!");
          FacesContext.getCurrentInstance().addMessage("user_form:email1",new FacesMessage(FacesMessage.SEVERITY_ERROR, "sommario2", "dettaglio2"));
     }
}

any help is really appreciated.
thanks

[niox.nikospara.yahoo.com]

Hello,

I took a quick look at the <rich:message> and it does provide a tooltip attribute... Maybe it is what you need.

Richfaces version: 3.3.0

If your version of Richfaces doesnt have this attribute, or you cannot upgrade, you could try embedding the tooltip inside the image, like:

<rich:message id="msg-email1" for="email1" showDetail="false">
     <f:facet id="facet-email1" name="errorMarker">
          <h:graphicImage id="img-email1" url="../icons/cancel.gif">
               <rich:toolTip id="tool-email1" for="img-email1">
               ...WHAT IS THE VALUE???
               </rich:toolTip>
          </h:graphicImage>
     </f:facet>
</rich:message>

Determining the value of the tooltip in this case is trickier. I cannot tell if the message components (both plain and rich ones) operate correctly when enclosed in the tooltip.

Last, there is allways the hardcore way: Implementing your own javax.faces.render.Renderer for the <h:message> or <rich:message> components. Renderers are not difficult to implement. And there is also the Richfaces CDK (though I have never used it).

[giunad]

Hello,

the tooltip attribute does not work either. I really don't know why.

I'll try your second suggestion. even if I have a doubt: ..what is the value..?!?!
I used rich:message with showDetail false to have just a gif. and showDetail true to have the tooltip with some text.

as you suggest, I sould nest 2 rich:message.

or is there another way?

as regard the hardcore way, I would like to spend some other time before implementing another render.

did you tried to implement my example? I can send you my code.

thanks.

[giunad]

giuseppe naddeo wrote on Jun 30, 2009 14:43:


Hello,

the tooltip attribute does not work either. I really don't know why.

I'll try your second suggestion. even if I have a doubt: ..what is the value..?!?!
I used rich:message with showDetail false to have just a gif. and showDetail true to have the tooltip with some text.

as you suggest, I sould nest 2 rich:message.

or is there another way?

as regard the hardcore way, I would like to spend some other time before implementing another render.

did you try to implement my example? I can send you my code.

thanks.

Click HELP for text formatting instructions. Then edit this text and check the preview.

[niox.nikospara.yahoo.com]

Hi,

I haven't tried your use case, I am only speculating. What I have tried is attaching a <rich:tooltip> to a <h:graphicImage>, outside any message tag and it did work.

I took a look at the <rich:message> renderer (org.richfaces.renderkit.html.HtmlRichMessageRenderer). It is quite simple. It renders the tooltip as the HTML title attribute. This means that the tooltip of <rich:message> can only contain plain text! The value that is displayed is the summary of the message, if the component is configured to show both summary and detail, and the tooltip flag is true. So the correct setup should be:

<rich:message
  id="msg-email1"
  for="email1"
  showDetail="true"
  showSummary="true"
  tooltip="true"
>
  <f:facet id="facet-email1" name="errorMarker">
    <h:graphicImage id="img-email1" url="../icons/cancel.gif"/>
  </f:facet>
</rich:message>
<!-- no rich:tooltip after this -->

Again, this is only speculation.

Finally, seeing the simplicity of the <rich:message> renderer, I bet that the hardcore solution is not so hardcore after all.

[giunad]

I tried your solution. it does not work. I mean it shows a gif and the detail part of error message but no tooltip.

I think you are right when you say that the renderer is simple, but as principle I don't want start re-writing a component just because I cannot understand it.
and btw why is

tooltip = true

not working?

also because it's just the beginning part of the project. I could loose the development control.

any other suggestion?

thanks

see you
g.

[giunad]

just one note:

checking the html code produced by page, I see that the tooltip is there but with 'display:none;'

if I disable it, the tooltip appears. but then is always on.

see you
g.

[niox.nikospara.yahoo.com]

Hello again,

This intrigued me, so I gave it a try. You are right, the tooltip doesn't show, when an errorMarker facet is configured. It is because only when the errorMarker facet is NOT specified, does the <rich:message> renderer render the image and the title.

I did come up with a solution though:

<rich:message
  id="msg-email1"
  for="email1"
  showDetail="true"
  showSummary="true"
  tooltip="true"
  errorLabelClass="YOUR_CLASS"
/>

And in theme.css (or wherever your styles are) something like:

.YOUR_CLASS {
  background-image: url(../icons/cancel.gif);
  background-repeat: no-repeat;
  padding-left: 20px;
}

Notes:

(1) The background image url is relative to the stylesheet - I keep forgetting this one :(

(2) padding-left should leave enough space for the image width+spacing from text

(3) In my dummy project, the bottom of the image was cropped; some additional CSS magic will probably do the trick here

Overall this solution is better than loading the server with yet another, irrelevant component (the <h:graphicImage>).

[giunad]

Great!
You are right. Now it does work.

I wonder where did you find the indication that the facet excludes the tooltip.

You helped me and a lot of other users, I think.

How can I thank you? Is there a way of rating your posts?

g.

[niox.nikospara.yahoo.com]

giuseppe naddeo wrote on Jul 01, 2009 10:26:


Great!
You are right. Now it does work.

I wonder where did you find the indication that the facet excludes the tooltip.

You helped me and a lot of other users, I think.

How can I thank you? Is there a way of rating your posts?

g.

My pleasure (I have been helped myself many times from people in the Internet, so I consider it sort of an obligation to help whenever I can; besides I too have learned from this)

I found the indication by experimenting and looking at the source code... Standard procedure :)

Yes, posts can be rated by the thread creator.

[giunad]

just a note to close (?) this thread.

Nikos's suggestion works on richfaces 3.1.4.GA

where rich:message tag produces

<span id="user_form:msg-email1" class="rich-message">
<span class="rich-message-label YOUR_CLASS" title="Summary-test"/>
</span>

on richfaces 3.2.2.SR1 and on richfaces 3.3.1.GA it does NOT work

producing the following html:

<span id="user_form:j_id17" class="rich-message YOUR_CLASS">
<span class="rich-message-label"/>
</span>

(title is missing)

I know it's just a tooltip... but hey guys it's just a tooltip. it should work.

[chris.simons]

I know it's just a tooltip... but hey guys it's just a tooltip. it should work.

I wholeheartedly agree.  Just to add my two cents - since I have been watching this thread and have found it somewhat humurous - I gave up on the RF ToolTip a long time ago after realizing that it never worked the way it should (and looked terrible to boot).

Instead I've been using the Prototip2 library, which can create beautiful, flexible tooltips.  Look it up.

[giunad]

Hi Chris,

can you post any help to integrate prototip2 and seam?

thanks in advance.

g.

[giunad]

I did it!!!

:D

<rich:message id="msg-email1" for="email1" showDetail="false">
     <f:facet id="facet-email1" name="errorMarker">
          <h:graphicImage 
               id="img-email1" 
               url="icons/cancel.gif" 
               onmouseover="#{rich:component('tooltipId')}.show(event);"
               onmouseout="#{rich:component('tooltipId')}.hide(event);" />
     </f:facet>
</rich:message>     

<a:form>
<rich:toolTip id="tooltipId" attached="false">
<rich:message id="tooltext-email1" for="email1" showDetail="true" />
</rich:toolTip>
</a:form>

I'm writing this last post hoping it can help you not to go crazy as I did.

I close saying that I did not understand why tooltip does not work in any other way.

see you
g.

[empinator]

@giuseppe: thank you, excelent solution!

I wrapped it into a custom facelet tag, so it can be used like this:

<rs:errormessage for="inputfield" />

<ui:composition>

     <rich:message for="${field}" showDetail="false" showSummary="false">
          <f:facet name="errorMarker">
               <h:graphicImage value="/img/icon/exclamation.png"
                    onmouseover="#{rich:component('${field}_tooltip')}.show(event);"
                    onmouseout="#{rich:component('${field}_tooltip')}.hide(event);" />
          </f:facet>
     </rich:message>
     <rich:toolTip>
          <rich:message id="${field}_tooltip" for="${field}" showDetail="false" showSummary="true" />
     </rich:toolTip>
</ui:composition>