jsf - primefaces input with tooltip button -
i create input-field-attached-tooltip-button (i don't quite know call it). this:
when hoover on question mark icon see text.
justification: little icon makes blatantly obvious there's attached field. can see indeed available without moving mouse pointer field. gives user warm fuzzy feeling.
i cannot figure out how in primefaces.
i not know framework has produced example above i'm pretty sure not primefaces.
i'm aware of <p:tooltip> don't think can this.
so here's i've come in primefaces:
(my screencapture not show mouse pointer)
i pretty took balusc's suggestions , created jsf custom component. here's custom component 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 xhtml has produced above screenshot looks 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 date field." show="true" /> <p:outputlabel for="myboolean" value="send ?" /> <p:selectbooleancheckbox id="myboolean" /> <customc:fieldhelp helptext="help text boolean field." show="false"/> <p:outputlabel for="mypwd" value="your password" /> <p:password id="mypwd" size="30" /> <customc:fieldhelp helptext="help text password field." show="true"/> </p:panelgrid> </h:form> seems work fine. can see had reduce size of icon otherwise way big.
some notes:
the composite doesn't wrap both icon , field. wraps icon. has downside you'll need 3 column layout , icon not displayed right next field. instead displayed in own column. not wanted.
the text conveyed in attribute. has downside cannot contain html markup regardless of fact destination,
<p:panel>, happily accept html markup.you can leave out icon using
showattribute, - because of 3 column layout -<customc:fieldhelp>need exist each field. clumsy again result of lack of knowledge. :-(
i'm sure can improved upon if 1 knew little more jsf/primefaces myself.
edit
if want icon right next input field (rather in column of own) you'll need <h:panelgroup> tag. can wrap group of elements in tag , <p:panelgrid> (or sibling : <h:panelgrid>) count single element, i.e. occupies 1 cell only. 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 date field." show="true" /> </h:panelgroup> <p:outputlabel for="myboolean" value="send ?" /> <h:panelgroup> <p:selectbooleancheckbox id="myboolean" /> <customc:fieldhelp helptext="help text 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 password field." show="true"/> </h:panelgroup> </p:panelgrid> </h:form> in addition had css tweaking vertical-align: middle icon vertically aligned rest.
Comments
Post a Comment