CODEWITHSUNDEEP
jsfprimefaces
peterh
peterh

Reputation: 19225

primefaces input with tooltip button

I would like to create input-field-attached-tooltip-button (I don't quite know what to call it). Something like this:

Example of what I want

When you hoover over the question mark icon you see the help text.

Justification: The little icon makes it blatantly obvious that there's help attached to the field. You can see that help is indeed available without even moving the mouse pointer to the field. Gives the user this warm fuzzy feeling.

I cannot figure out how to do this in PrimeFaces.

I do not know which framework has produced the example above but I'm pretty sure it is not PrimeFaces.

I'm well aware of <p:tooltip> but I don't think it can do this.

Upvotes: 3

Views: 10363

Answers (1)

peterh
peterh

Reputation: 19225

So here's what I've come up with in PrimeFaces:

My example

(my screencapture does not show the mouse pointer)

I pretty much took BalusC's suggestions and created a JSF custom component. Here's what my custom component look like:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:composite="http://java.sun.com/jsf/composite">


    <composite:interface>
        <composite:attribute name="helptext"/>
        <composite:attribute name="show" />
    </composite:interface>

    <composite:implementation>
        <p:button id="help" style="width: 15px; height: 15px" icon="ui-icon-help" rendered="#{cc.attrs.show}"/>
        <p:overlayPanel for="help" showEvent="mouseover" hideEvent="mouseout" hideEffect="fade" >
            <p:panel>
                #{cc.attrs.helptext}
            </p:panel>
        </p:overlayPanel>

    </composite:implementation>
</html>

and the xhtml that has produced the above screenshot looks like this:

<h:form>
    <p:panelGrid columns="3" styleClass="noBorders">

        <p:outputLabel for="mydate" value="Date"  />
        <p:calendar id="mydate"  pattern="yyyy/MM/dd" />
        <customC:fieldhelp helptext="Help text for date field." show="true" />

        <p:outputLabel for="myboolean" value="Send now ?" />
        <p:selectBooleanCheckbox id="myboolean" />
        <customC:fieldhelp helptext="Help text for boolean field." show="false"/>

        <p:outputLabel for="mypwd" value="Your password" />
        <p:password id="mypwd" size="30" />
        <customC:fieldhelp helptext="Help text for password field." show="true"/>

    </p:panelGrid>
</h:form>

Seems to work fine. As you can see I had to reduce the size of the icon otherwise it would be way too big.

Some notes:

  • The composite doesn't wrap both the help icon and the field. It only wraps the help icon. This has the downside that you'll need a three column layout and that the help icon is not displayed right next to the field. Instead it is displayed in its own column. Not exactly what I wanted.

  • The help text is conveyed in an attribute. This has the downside that it cannot contain any HTML markup regardless of the fact that the destination, the <p:panel>, would happily accept HTML markup.

  • You can leave out the help icon using the show attribute, however - because of the three column layout - the <customC:fieldhelp> always need to exist for each field. This is very clumsy but is again a result of my lack of knowledge. :-(

I'm sure it can be improved upon if one knew a little more JSF/PrimeFaces than myself.

EDIT

If you want the icon right next to the input field (rather than in a column of its own) then you'll need the <h:panelGroup> tag. You can wrap a group of elements in this tag and <p:panelGrid> (or its sibling : <h:panelGrid>) will then count it as a single element, i.e. occupies one cell only. Something like this:

<h:form>
    <p:panelGrid columns="2" styleClass="noBorders">

        <p:outputLabel for="mydate" value="Date"  />
        <h:panelGroup>
            <p:calendar id="mydate"  pattern="yyyy/MM/dd" />
            <customC:fieldhelp helptext="Help text for date field." show="true" />
        </h:panelGroup>

        <p:outputLabel for="myboolean" value="Send now ?" />
        <h:panelGroup>
            <p:selectBooleanCheckbox id="myboolean" />
            <customC:fieldhelp helptext="Help text for boolean field." show="false"/>
        </h:panelGroup>

        <p:outputLabel for="mypwd" value="Your password" />
        <h:panelGroup>
            <p:password id="mypwd" size="30" />
            <customC:fieldhelp helptext="Help text for password field." show="true"/>
        </h:panelGroup>

    </p:panelGrid>
</h:form>

In addition I had to do some CSS tweaking with vertical-align: middle to get the icon vertically aligned with the rest.

Upvotes: 3

Related Questions