Any solution for h:graphicImage using rich:toolTip

[ya ji]

In the page, there is a rich:datalist, loop this datalist, each row has a h:graphicImage component, when user move mouse over this image, show a rich:toolTip.

Following code works fine:
<h:graphicImage id ="Test" value="a.gif" width="12" height="12">
<rich:toolTip for="Test">
<span>error message</span>
</rich:toolTip>
</h:graphicImage>

As you know, h:graphicImage can't have a dynamic id, so in datalist, I can't give each h:graphicImage a unique id which can be use by "for" attribute in rich:toolTip

If h:graphicImage without id, rich:toolTip doesn't work.

I want to make toolTip for each image in datalist work, who has solution for this issue?

thanks in advance!

[Tim Holloway]

ya ji wrote:In the page, there is a rich:datalist, loop this datalist, each row has a h:graphicImage component, when user move mouse over this image, show a rich:toolTip.

Following code works fine:
<h:graphicImage id ="Test" value="a.gif" width="12" height="12">
<rich:toolTip for="Test">
<span>error message</span>
</rich:toolTip>
</h:graphicImage>

As you know, h:graphicImage can't have a dynamic id, so in datalist, I can't give each h:graphicImage a unique id which can be use by "for" attribute in rich:toolTip

If h:graphicImage without id, rich:toolTip doesn't work.

I want to make toolTip for each image in datalist work, who has solution for this issue?

thanks in advance!

I think the key indicator of what you're doing wrong is when you say "loop this datalist".

JSF is not designed for putting Controller logic in the View.

Just because other JSP frameworks allow you to program the display doesn't mean JSF was intended to do likewise. It's actually NOT a good practice, any more than putting excessive amounts of business logic in a database stored procedure is. If you splatter logic all over the landscape, you're probably going to end up warping it as each subsystem makes its own particular types of deformities on the process. And you'll make the app harder to maintain, since the first thing s maintainer has to do when something needs changing is figure out which component(s) the changes apply to and how they interact. Unanticipated interactions are a major source of error.

OK. End of rant.

If you use the JSF datatable, the ID will be unique. Therefore you will be able to give each item its own independent tooltip.

The low-level ID will be a composite of the datatable's ID plus an unpredictable generated value that will probably be something like an index number, but whose exact value will depend on which JSF implementation you use. You shouldn't care about that, however, since you only need the ID you code and JSF will handle the rest.

Here's something I just happened to have laying around. It uses the dataGrid instead of the dataTable, but the general effect is the same:

                    <rich:dataGrid value="#{listingItem.images}"
                        var="image" columns="3" id="imageGallery"
                    >
                        <f:facet name="header">
                            <h:outputText value="Images" />
                        </f:facet>

                        <h:panelGrid columns="1" id="imagePanel"
                                footerClass="imageFooter"
                            >
                            <a4j:mediaOutput element="img"
                                id="paintPic" mimeType="#{image.mime}"
                                createContent="#{listingItem.imagePaint}"
                                value="#{image}" style="width:100px; height:100px;"
                                cacheable="false"
                            >
                            </a4j:mediaOutput>
                            <rich:toolTip for="paintPic" value="#{image.imageName}"/>
                        </h:panelGrid>
       <rich:dataGrid>

[ya ji]

Fixed!
Inclose toolTip to h:graphicImage and give h:graphicImage an id, but don't give toolTip id.

[Tim Holloway]

ya ji wrote:Fixed!
Inclose toolTip to h:graphicImage and give h:graphicImage an id, but don't give toolTip id.

Well, actually, it should be OK to give the tooltip an ID - just not the same ID as any other element on the page.

in XML, the "id=" attribute MUST be unique within its context. Which is why things like the message tag uses the "for=" attribute to indicate what its aimed at. It can't simply specify the same id attribute as its target.